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