Bild in einem SVG-Element zentrieren

Man kann ein Bild in einem SVG-Element wie folgt zentrieren:

<svg id="box" width="200" height="200">
<image 
  width="114" 
  height="158" 
  xlink:href="images/card.png"
 
  x="50%" 
  y="50%" 
  transform="translate(-57, -79)"
  >
</image>
</svg>

In Worten:

  1. Obere linke Ecke des Bildes in der Mitte der Fläche ansetzen (x="50%", y="50%")
  2. Bild um die Hälfte der Bildgröße nach links verschieben (-57)
  3. Bild um die Hälfte der Bildhöhe nach oben verschieben (-79

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.