Question

下面的代码无法按预期工作。不在矩形的背景中显示图像。

<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 。任何帮助将非常感激。

Answer 1

您无法引用＆lt; defs＆gt;如果要填充元素，则需要＆lt; pattern＆gt;。所以将id放在＆lt; pattern＆gt;上元素而不是。一般来说，你应该把你的＆lt; defs＆gt;在它们被使用之前的元素，它的效率更高。

像这样：

<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>

为什么此代码不在svg矩形上显示背景图像

1 个答案: