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

【问题标题】：External svg file is loaded but doesn't show up外部 svg 文件已加载但未显示
【发布时间】：2020-04-03 17:53:25
【问题描述】：

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

我的 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 文件正确渲染？

【问题讨论】：

标签： html svg

【解决方案1】：

您缺少xmlns="http://www.w3.org/2000/svg"。 xmlns 属性是image/svg+xml MIME 类型所必需的。

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>

【讨论】：