JürgenB: SVG skalieren

Beitrag lesen

problematische Seite

Hallo,

ich habe eine Grafik in SVG mit einer Angabe zum viewport. Daurch ist die Grafik skalierbar. Leider wird nicht nur die Position der Grafikelemente mit der Größe des SVG-Elements skaliert, sondern auch deren Größe. Siehe hierzu die „problematische Seite“. Da ich die Grafik per JS erzeuge, hier noch mal der erzeugte Code:

#plotarea { background-color:#ffffff; width:90%; height:80vh; border: 1px solid black }
<figure id="plotarea">
  <svg preserveAspectRatio="none" viewBox="0 0 500 500" height="100%" width="100%">
    <line stroke-width="1" stroke="black" y2="460" x2="480" y1="480" x1="20"></line>
    <polyline points="20,475 15,10 490,50 470,400 400,450 " fill="none" stroke-width="3" stroke="green"></polyline>
    <polygon points="70,430 70,70 430,70 430,430 " fill-opacity="0.2" fill="red" stroke="none"></polygon>
    <text y="430" x="70" dy="1.1em" text-anchor="end" style="font-size: 0.8em; color: blue; fill: blue;">Text_ro</text>
    <text y="430" x="70" dy="-0.1em" text-anchor="start" style="font-size: 1em; color: blue; fill: blue;">Text_lu</text>
    <text transform="translate(0,0) rotate(270)" y="430" x="-250" dy="0.3em" text-anchor="middle" style="font-size: 1.5em; color: blue; fill: blue;">Text_mm</text>
  </svg>
</figure>

Gibt es eine Möglichkeit, diese Grafik so zu gestalten, dass die Positionsangaben mit der Größe des SVG-Elements mit skalieren, die Text-Größe und die Linienstärke aber nicht?

Gruß
Jürgen