Question

我想使用SVG创建这个三角形/多边形形状并为其指定背景图像。

    <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:

Happy Chanukkah

Answer 1

fill属性引用模式，在您的情况下是url(#image)（就像您在CSS中所做的那样）。重复图像的URL在那里毫无意义。请参阅与您相关联的问题中的已接受答案。

除此之外，您必须确保<pattern>所跨越的视图框实际上与应该应用的形状相匹配。请参阅此更新的小提琴：http://jsfiddle.net/boldewyn/k7Rk9/12/

Answer 2

问题是fill =“＃url”

你必须给多边形/路径一个类，然后从该类中分配背景图像（已在defs中定义）：

    .imageFill {
      fill: url(#image);
    }

为什么此背景图片不适用于此SVG？

2 个答案: