nicht angemeldet
SVGs verschachteln - verschiedene Ausschnitte mit viewBox
Matthias Scharwies
SVGs verschachteln - verschiedene Ausschnitte mit viewBox
Matthias Scharwies
Rolf BGuten Morgen,
Ich möchte eine Infografik zu Art Direction machen. Dafür will ich als Ausgangsgrafik dieses SVG-Beispiel nehmen:
Meine Idee war jetzt, dieses SVG in einem anderen SVG mehrfach aufzurufen und mithilfe der ViewBox passend zu skalieren, dass ich eine
- 16:9 Ansicht
- 4:3 auf Desktop und eine
- mobile mit 1:2.5 ?
habe, bei denen der Ausschnitt mit der viewBox skaliert und entsprechend auf den Berg mit der Kirche ausgerichtet wird.
Leider kriege ich es nicht hin, die viewBox wie gewünscht einzustellen?
Habt ihr irgendwelche Tipps?
BTW: Die Idee mit einem image-Element hat auch nicht gefunzt. 😟
<image href="https://wiki.selfhtml.org/images/5/54/Landscape.svg"
viewBox="0 0 250 200"
width="250"
height="200" >
<title>Ausschnitt</title>
</image>
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
-
Servus!
Guten Morgen,
Habe nur die viewBox verändert:
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200" x="400" y="200" viewBox="100 0 250 200"> <use xlink:href="#landscape" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"/> </svg>Jetzt läuft's!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
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>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.
Rolf
--
sumpsi - posui - obstruxi-
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
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Jetzt hab ich endlich kapiert, worum's ging und welchen Fehler ich gemacht hab:
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, ...
Auch ohne ViewBox sind das die Koordinaten!
Mein Fehler war, dass ich mir irgendwie 500x200 gemerkt hatte und dann...
sowohl bei
viewBox="0 0 500 200"als auch bei
viewBox="0 0 300 200"und auch bei
viewBox="0 0 250 200"das gleiche Bild rausbekam! Kaum verwendet man 250 und 100, bzw kleinere Werte, kann man skalieren und alles ist logisch!
Das waren 2 Bilder, die seit langem gefehlt hatten.
Jetzt ist das Tutorial responsive Bilder mit picture erst mal fertig!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias,
ja, kaum macht man's richtig, und schon funktioniert es 😉
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
