Hintergrundbild aus svg-bibliothek

[Rolf B]

Hallo Mike vh,

ich will das allerdings nicht über umwege mit diesem <view> machen...

Dein Wille ist hier nicht von Belang. Ich will auch, dass mein Computer bestimmte Dinge tut. Aber wenn ich ihm das anders beibringe, als er es haben will, dann schmollt er mich nur an.

Das <view> Element ist wohl die Grundvoraussetzung. Der Fragment-Identifier wählt einen view (also Bildausschnitt) aus, der anzuzeigen ist. Insofern ist das kein Umweg, sondern die passende SVG-Vokabel zur Definition von "Welches Sprite ist wo".

Zu beachten: Die width- und height-Angaben auf dem SVG-Element UND die background-size im HTML-Element muss das gleiche Seitenverhältnis haben wie die viewBox-Breite und -Höhe in den <view> Elementen. Andernfalls kann es passieren, dass Sprite-Teile sichtbar sind, die außerhalb des view liegen, denn das view-Element schneidet außerhalb liegende Teile des SVG nicht weg.

Bei einem img Element ist sowas mit der aspect-ratio Eigenschaft gut lösbar, aber für background-image gibt es das nicht. Was aber geht, ist "contain" als background-size Angabe. Dann wird der View-Bereich so groß dargestellt, dass er vollständig ins Element passt, und was außerhalb ist, wird nicht gezeigt.

<svg version="1.0" width="100" height="100" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

<view id="rot"  viewBox="0 0 400 400"   preserveAspectRatio="xMidYMid meet" />
<view id="blau" viewBox="400 0 400 400" preserveAspectRatio="xMidYMid meet" />

<!-- Sprite #rot -->
<g transform="translate(0,0)">
<rect x="50" y="50" width="300" height="300" fill="red" stroke="black" stroke-width="10"></rect>
</g>

<!-- Sprite #blau -->
<g transform="translate(400,0)">
<rect x="50" y="50" width="300" height="300" fill="blue" stroke="black" stroke-width="10"></rect>
</g>

</svg>

Ich habe die Sprites in einen g-Block gesteckt und ihn mit transform verschoben, damit innerhalb eines Sprites so gearbeitet werden kann, als ob (0,0) der Ursprung wäre.

Rot: https://wiki.selfhtml.org/images/6/62/Sprites-mit-View.svg#rot
Blau: https://wiki.selfhtml.org/images/6/62/Sprites-mit-View.svg#blau

URLs gelten, bis jemand eine neue Bildversion hochlädt. Bild im Wiki

Um das als Beispiel im Wiki einsetzen zu können, muss ich die Selfhtml-Extension noch etwas anpassen, glaube ich.

Rolf