Geek Answers Handbook

Fill an SVG element with an offset background image

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

However, I want to shift / shift the image. Using CSS, this can be easily done by setting background-image and background-position . How to do it using SVG?

+6
html css image svg background-image
source share
2 answers

You can use patternTransform for a template element to transform a template; it works the same as the transform attribute, with which you may already be familiar. See the documentation for more details.

+6
source share

You can use pattern and SVG element with attribute fill .

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

 <p> <a href="http://i.imgur.com/09AoLQtr.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="http://i.imgur.com/09AoLQtr.jpg"/> </pattern> </defs> <rect fill="url(#europe)" transform="translate(-30 -540)" x="40" y="550" width="420" height="340"/> </svg>
0
source share

More articles:


All Articles