为什么这段代码没有在svg rectangale上显示背景图片

我的下面的代码不能按预期工作。不在矩形的背景中显示图像。为什么这段代码没有在svg rectangale上显示背景图片

<html> 
    <body> 
    <svg width="600" height="700"> 
     <rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" style="fill:url(#godhelpme);"> 
     <title stroke="blue">My test</title> 
     </rect> 
     <defs id="godhelpme"> 
     <pattern width="200" height="200" x="0" y="0" patternUnits="userSpaceOnUse"> 
      <image width="200" height="200" class="eq__NEcontainer__currentAlarmAction" xlink:href="CurrentList.png"></image> 
     </pattern> 
     </defs> 
    </svg> 
    </body> 
</html>

该矩形总是黑色，如图像。有任何想法吗？ enter image description here 。我曾尝试使用chrome进行调试。在调试器中点击图片标签显示为空。我附上了图片以供参考。 image tag in chrome debugger Blank image container without image 。任何帮助将不胜感激。

来源

2014-03-19 sakthisundar

呃，你的CSS标签似乎无关紧要无码。 –

从图像中删除班级，看看什么是hapening？ –

您不能引用< defs>元素作为填充，您需要<模式>。因此，请将id放在< pattern>元素上。另外一般来说，你应该把你的< defs>元素放在他们使用的地方之前，这样更有效率。

像这样：

<html> 
    <body> 
    <svg width="600" height="700"> 
     <defs> 
     <pattern id="godhelpme" width="200" height="200" x="0" y="0" 
       patternUnits="userSpaceOnUse"> 
      <image width="200" height="200" 
       class="eq__NEcontainer__currentAlarmAction" 
       xlink:href="CurrentList.png"></image> 
     </pattern> 
     </defs> 
     <rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" 
      style="fill:url(#godhelpme);"> 
     <title stroke="blue">My test</title> 
     </rect> 
    </svg> 
    </body> 
</html>

来源

2014-03-19 09:05:13

为什么这段代码没有在svg rectangale上显示背景图片

回答

相关问题