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影响＆＃39;图像＆＃39; ＆＃39;模式＆＃39;或者＆＃39;圈＆＃39;元件。

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>标记，则将所有网址设为绝对。

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

1 个答案: