html - Fill SVG path element with a background-image -

html - Fill SVG path element with a background-image -

is possible set backgound-image svg path element?

for instance, if set element's class wall, css style .wall {fill: red;} works, .wall{background-image: url(wall.jpg)} not, neither .wall {background-color: red;}.

you can making background pattern:

<defs> <pattern id="img1" patternunits="userspaceonuse" width="100" height="100"> <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" /> </pattern> </defs>

adjust width , height according image, reference path this:

<path d="m5,50 l0,100 l100,0 l0,-100 l-100,0 m215,100 a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 m265,50 l50,100 l-100,0 l50,-100 z" fill="url(#img1)" />

working example

html css image svg background-image