Fixe Höhe: SVG als Auswahl

Question

Hallo Zusammen

Ich möchte bei der SVG als Auswahl Frage gerne ein SVG mit einer Höhe von 624 px anzeigen. Momentan wird die Grafik jedoch skaliert, wenn ich das Browserfenster verkleinere. Gibt es eine Möglichkeit, der Grafik eine feste Höhe von 624 px zuzuweisen, sodass sie auch auf mobilen Geräten ausreichend angezeigt wird?

Vielen Dank für die Hilfe!

Comments

Welche Breite hat die Grafik denn bei einer Höhe von 624 Pixeln?

---

Die Breite beträgt 543 px. Ich verstehe aber nicht ganz, warum das relevant ist.

Momentan habe ich es über ein Script gelöst, welches den EventListener umgeht:

<script>
function fixSvgIframeHeightOnce(iframe) {
  iframe.style.height = "824px";
  iframe.style.width = "100%";
  iframe.style.maxWidth = "100%";
  iframe.style.border = "none";
  iframe.style.display = "block";
}

window.addEventListener("load", function() {
  const iframe = document.getElementById("A006_SVG");
  if (!iframe) return;

  // Sofort fixen
  fixSvgIframeHeightOnce(iframe);

  // Nur nochmal fixen, wenn SoSci das iframe verändert (z. B. per Script)
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      fixSvgIframeHeightOnce(iframe);
    });
  });

  observer.observe(iframe, {
    attributes: true,
    attributeFilter: ["style", "height"]
  });
});
</script>

Answer 1

Die Breite beträgt 543 px. Ich verstehe aber nicht ganz, warum das relevant ist.

Relevant ist es aufgrund einer Einstellung für das iFrame:

max-width: 100%;

Wenn das Bild auf einem kleinen Display von der Breite her nicht in das Layout passt, wird es kleiner skaliert.

Ein zusätzliches Skript kümmert sich dann darum, dass auch die Höhe angepasst wird. Es sollte deshalb eigentlich ausreichen, wenn Sie die o.g. Breitenbegrenzung aus dem Element entfernen.

window.addEventListener("resize", function() {
    let iframe = document.getElementById("A006_SVG");
    iframe.style.maxWidth = "";
    iframe.style.height = "624px";
});

Comments

Vielen Dank für die Antwort! Das funktioniert leider nur bedingt. Es kann vorkommen, dass das SVG breiter ist als der Bildschirm. In diesem Fall ist es in Ordnung, wenn sich das SVG skaliert. Allerdings füllt es von Anfang an nicht den kompletten iframe aus, weswegen es schlussendlich extrem klein wird.

Hier sehen sie die aktuelle Ansicht: https://ibb.co/Mx9vrLKY

Ziel wäre es, dass das SVG die komplette Breite ausfüllt und es keine unnötigen Ränder im iframe gibt.

---

Ich vermute, dass die Maße des SVG von SoSci bzw. dem verwendeten JavaScript nicht korrekt ausgelesen werden - oder dass im SVG falsche Maße hinterlegt sind. Wenn Sie einen Pretest-Link direkt (!) zur Seite mit der SVG-Auswahl posten, kann ich mir das gerne genauer ansehen.