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。