Hallo Leute,

es werden in ein svg automatisch verschiedene Bilder eingefügt. Ich möchte gerne dass diese Bilder nicht verzerrt dargestellt werden.

Sie sollen z.B.: auf die Höhe angepasst werden und in einem gewissen Bereich zentriert. Aber nicht irgendwie blöd verzerrt.

HTML-Code:

<svg width="1360" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <image xlink:href="http://mydomain.com/background.jpg" id="svg_1" height="768" width="1360" y="0" x="0"/>
   <image viewBox="0 0 350 280" width="100%" height="100%" x="50" y="330" preserveAspectRatio="xMidYMid" id="svg_2" xlink:href="http://mydomain.com/bild.png"/>
</svg>

Ich dachte mir mit diesem preserveAspectRatio und der viewBox könnte das gehen, aber das ist leider nicht der Fall. Wird trotzdem auf die gesamte viewBox skaliert.

Liegt es vielleicht an width und height?

Ich habe wirklich schon alles mögliche ausprobiert.
Mache ich da was falsch?

Danke im Voraus für Infos
Darian