时间戳

首页 > 解决方案 > 外部 svg 文件已加载但未显示

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

问题描述

我想在运行时将外部 svg 文件加载到我的 Html 文档中。正如这里所讨论的，我使用一个<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 代码在检查器中可见

如何正确渲染对象中的 SVG 文件？

标签： htmlsvg

解决方案

你失踪了xmlns="http://www.w3.org/2000/svg"。MIME 类型xmlns需要该属性。image/svg+xml

是否需要 'xmlns' 和 'version' 等 SVG 参数？

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

推荐阅读