7

I want to do something similar to this Fill SVG path element with a background-image

However, I want to shift/offset the image. With CSS, it can easily done by setting background-image and background-position. How do I do it with SVG?

Community
  • 1
  • 1
jpbochi
  • 4,366
  • 3
  • 34
  • 43

2 Answers2

6

You can use patternTransform on the pattern element to transform the pattern; it works just like the transform attribute you may already be familiar with. See the documentation for details.

Anomie
  • 92,546
  • 13
  • 126
  • 145
1

You can use a pattern and a SVG element with the fill attribute.

Here is an example: insert an image at position (10, 10) with a (40, 550) offset and a size (420, 340). Note that you must set the correct x/y and transform="translate(-x1 -y2)".

<p>
  <a href="https://i.imgur.com/MQHYB.jpg">Original image</a>
</p>

<svg version="1.1" width="500" height="400" style="background-color: #EEE;">
  <defs>
<pattern id="europe" patternUnits="userSpaceOnUse" 
         width="1456px" height="1094px">
  <image xlink:href="https://i.imgur.com/MQHYB.jpg"/>
</pattern>
  </defs>

  <rect fill="url(#europe)" transform="translate(-30 -540)" 
    x="40" y="550" width="420" height="340"/>
</svg>
tokland
  • 66,169
  • 13
  • 144
  • 170