All geek questions in one place

Centering an image using SVG

I have the following image in my .svg file:

 <image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71"/>

I want it to appear in the middle of the page, but it seems that the top left corner is in the middle. How can I get the center of the image to display in the center of the page?

+6
source share
2 answers

Something like this should work:

 <image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71" transform="translate(-35.5,-31)"/>
+13
source

Here is one way ...

 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg x="50%" y="50%" width="258px" height="221px" overflow="visible"> <image x="-129px" y="-110.5px" width="258px" height="221px" xlink:href="http://images2.wikia.nocookie.net/__cb20110303182948/hogwartsrpg/images/9/95/KittenCareCat.png"/> </svg> </svg>
+4
source

Source: https://habr.com/ru/post/918498/

More articles:


All Articles