2

I have the following SVG image:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
    <pattern id="i" width="100%" height="100%">
    <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMinYMin slice"/>
    </pattern>
    <rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
    </svg>

I need the rectangle to fill with an image equivalent to the following CSS syntax:

background-size:cover;
background-image:url("image.jpg");
background-repeat:no-repeat;
background-position:right top;

Thanks to this post, I got them all except background-position:right top. Is this possible in an SVG image? If so, how can I achieve this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
GFL
  • 1,278
  • 2
  • 15
  • 24

1 Answers1

0

To mimic the behavior, so that the top right corner of the picture is located at the top right corner of the rect, you just need to change the preserveAspectRatio="xMinYMin slice" of the image to preserveAspectRatio="xMaxYMin slice":

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
    <pattern id="i" width="100%" height="100%">
    <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/>
    </pattern>
    <rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
    </svg>
vqf
  • 2,600
  • 10
  • 16