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


Is a SVG & lt; Path & gt; It is possible to set backgound-image for; For example, if I work from element class to wall , CSS style .wall {fill: red;} , but .wall {background-image: url (wall.jpg)} No, neither .wall {background-color: red;} .

You can do it in the background at the same time:

  Lt; Defs & gt; & Lt; Pattern id = "img1" patternUnits = "userspace on usage" width = "100" height = "100" & gt; & Lt; Image xlink: href = "wall.jpg" x = "0" y = "0" width = "100" height = "100" /> & Lt; / Pattern & gt; & Lt; / Defs & gt;  

Adjust the width and height according to your image, then refine it with the path like this:

  & lt; Path d = "M5,50 l0, 100 l100,0 l0, -100 l -1,0,0 m 215,100 a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 m 265,50 L50,100 L -1,0,0 L50, - 100 z "fill =" url (# img1) "/>  


Comments