Question

我想在运行时将外部svg文件加载到我的HTML文档中。如here所述，我使用<object type="image/svg+xml"></object>并通过Javascript更改data属性。

我的html看起来像这样（粘贴了下面的cross.svg文件以供参考）：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <object id="svg_verified" type="image/svg+xml" data="cross.svg"></object>
        <svg>
            <circle cx="50" cy="50" r="50" fill="#111"/>
            <rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
            <rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
        </svg>
    </body>
</html>

加载的页面如下所示：

但是，我可以在检查器中看到svg文件已加载：

如何使对象中的SVG文件正确呈现？

Answer 1

您缺少xmlns="http://www.w3.org/2000/svg"。 xmlns MIME类型必须具有image/svg+xml属性。

Are SVG parameters such as 'xmlns' and 'version' needed?

<object type="image/svg+xml" data="https://svgshare.com/i/GhM.svg"></object>
<!---->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="50" fill="#111"/>
  <rect y="-5" width="140" height="10" fill="white" transform="rotate(45)"/>
  <rect y="-5" width="140" height="10" fill="white" transform="translate(100,0) rotate(135)"/>
</svg>

外部svg文件已加载，但未显示

1 个答案: