Search code examples
htmlcssimagesvgbackground-image

Fill SVG element with with a background-image with an offset

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?

Solution

  • 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.