How do I align the image to center in the SVG regardless of changes made to image's width?

Asked Jan 20 '20 at 13:16

Active Mar 18 '20 at 19:12

Viewed 147 times

I tried using css and js to align the image in center but it did not work. The image does not stay aligned in the center if I increase or decrease the width of the image. Please help me with the solution that can align any svg images to the center regardless to their width.

<svg style="border:5px solid black" version="1.1" id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 500">
        <image visibility="visible" id="header_image" x="45%" y="6%" width="20%" href="https://resources.mynewsdesk.com/image/upload/t_open_graph_image/eyblf65bkcezbnfxfo3n.jpg"></image>
</svg>

edited Mar 18 '20 at 19:12

TylerH

20,799
66
75
101

asked Jan 20 '20 at 13:16

thisisme

Since width is 20% you may want to use x="40%" – enxaneta Jan 20 '20 at 15:27
Thank you but percentage cannot be static because if width or height changes for the image. It won’t be in the center – thisisme Jan 21 '20 at 13:59

How do I align the image to center in the SVG regardless of changes made to image's width?

0 Answers0