css - 为什么这个背景图片不适用于这个 SVG？

Question

我想使用 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:

光明节快乐

Answer 1

问题是 fill="#url"

你必须给多边形/路径一个类，然后从那个类，分配背景图像(已经在 defs 中定义):

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