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