javascript - SVG 多边形填充图像不起作用

Question

我以前有这个工作，但出于某种原因，我的模式似乎没有任何工作。

我已经尝试了所有方法来实现它，它在纯色下工作得很好，但是当我尝试使用图案时，它只是变得透明。

我什至重新开始使用新的 SVG 模式示例，但它仍然不起作用。

SVG代码

<svg width="100" height="100">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

这只是显示了一个透明的圆圈。据我所知，这里的一切都是正确的，并且没有影响“图像”、“图案”或“圆圈”元素的 CSS。

在 chrome + firefox 中都有问题，所以很确定它是代码问题或页面上的其他问题。

试图让它在这里工作:http://www.slidingwardrobesexpress.co.uk/index.php?dispatch=wardrobe_tool.step1

第一个衣柜门应该用深红色图像填充。

有什么想法吗？我找不到任何其他关于 SVG 模式在给定要填充的模式时没有填充的提及。

我实际的实时代码是:

<defs>
 <pattern id="img-lacobel_darkred"  patternUnits="userSpaceOnUse" width="50" height="50" ><image xlink:href="/{$img_path}/lacobel_aluminiumrich.jpg" x="0" y="0" /></pattern>
</defs>
<polygon class="svgDoor1 D1S1" id="D1S1P1" points="8,12 131,41 131,415 8,428" fill="url(#img-lacobel_darkred)" style="stroke:black;stroke-width:1"  />

Answer 1

您的实际实时代码在 <image> 上缺少宽度和高度属性元素。在 SVG 1.1 中，这些默认值(毫无帮助)为 0。

您还使用了 <base>标记是打破所有引用的好方法，因为基数被添加到所有片段标识符之前，也就是那些 # 符号。删除 <base>标签使您的测试用例在您的站点上工作。如果您确实需要 <base>，还有其他解决方案，例如将所有 URL 设为绝对 URL标签在那里。