我想使用 SVG 创建这个三 Angular 形/多边形形状并为其分配背景图像。
<svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
</pattern>
<polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
</defs>
</svg>
与这个问题非常相似here:
光明节快乐
最佳答案
问题是 fill="#url"
你必须给多边形/路径一个类,然后从那个类,分配背景图像(已经在 defs 中定义):
.imageFill {
fill: url(#image);
}
关于css - 为什么这个背景图片不适用于这个 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20356094/