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
Comments
Post a Comment