在safari / firefox中表达svg图像元素渲染问题

Question

我正在快递4上构建反应应用程序，应用程序的一部分是我使用d3构建的图表。我在safari和firefox（但不是chrome）上的svg标签中保存的任何图像都有问题，例如：

<svg width="1373.6499999999999" height="250">
  <g transform="translate(20,20)" >
  <image href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30">
   </image></g></svg>

它基本上在页面上呈现它应该是但只是空白：

我尝试过使用不同的文件类型和完整的网址。我尝试过不同的文档类型，但这似乎并没有让我到任何地方。

有很多关于图像标记在Safari上没有呈现的问题的文档，但据我所知，最接近的问题可能是内容类型标题，我没有＆＃39;取得了成功。我在反应之外尝试了svg，我仍然遇到同样的问题。

我知道作为替代方案，我可以在图表中附加一个img，但我想尝试避免这种情况。

Answer 1

href元素的<image>属性不是SVG名称空间的一部分。它属于XLink命名空间。因此，您需要添加名称空间声明并相应地为该属性添加前缀（通常被视为xlink:href）。对于您的代码，这意味着：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="1373.6499999999999" height="250">
  <g transform="translate(20,20)" >
    <image xlink:href="/images/withdrawal.png" class="withdrawal" x="100.84925373134327" y="72.41613009407105" width="30" height="30">
    </image>
  </g>
</svg>