SVGs verschachteln - verschiedene Ausschnitte mit viewBox

[Matthias Scharwies]

Servus!

Hallo Matthias,

das #landscape SVG sollte eine Viewbox bekommen! Deine Landschaft ist im Bereich (0,0)-(250,100) gemalt, und ohne Viewbox zeichnet der Browser das in dieser Pixelgröße, egal welche width/height Du für das SVG angibst. Width und Height braucht es dann aber immer noch, andernfalls ist das SVG so groß wie der Viewport.

Auf diese Weise bekommst Du nachvollziehbare und skalierbare Maße für das Kirchlein.

<svg id="landscape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 250 100" width="250" height="100" x="0" y="0" >
...
</svg>

Hatte ich am Anfang drin, dann rausgeschmissen.

In der 3. Version funktionieren die Skalierungen:

Datei:Picture-art-direction.svg (png-Vorschau, evtl Cache löschen)

Der transform, den Du auf das zweite SVG anwendest, ist wirkungslos. Ich würde mutmaßen, dass das daran liegt, dass das Elterndokument kein HTML ist.

Das use Statement im zweiten SVG lässt sich per transform beeinflussen - der translate führt es zwar nicht in die Wallachei (das wäre im Osten und dafür müsste x positiv sein), aber dafür auf die Azoren oder so.

Die transforms funktionieren nicht in der png-Vorschau, ich hab's in die Koordinaten eingerechnet.

Rolf

Herzliche Grüße

Matthias Scharwies