如何将 SVG 文件引入网页并显示其内容？-html教程-PHP中文网

如何将 SVG 文件引入网页并显示其内容？

DDD

发布： 2024-11-04 14:18:23

原创

814人浏览过

如何将 SVG 文件引入网页并显示其内容？

将引入的 svg 转换为代码形式

在网页中引入 SVG 文件时，查看源代码可能只看到一个类似 ./test.svg 的文件路径，而其他网站引入的 SVG 却是大段的编码。本文将介绍如何通过代码的形式引入 SVG 文件。

为此，可以使用以下步骤：

住哪网酒店预订程序城市专用版

住哪酒店分销联盟是住哪网提供的一个网络分销预订平台。加入该本台，您可以通过在您网站或博客上展示图片、文字链接或搜索框，只要通过您的展示预订并入住的订单，您将得到至少12元/间夜的佣金。　　加入条件非常宽松，如您经营的是商业性质还是个人性质的网站，可以通过本站提供的API接口，建立一个频道，一方面丰富网站内容，另一方面增加网站收入；如果您在其它网站上有博客，可以通过文字和图片链接，只要通过您的链接预

查看详情

获取 SVG 文件的内容： 使用 fetch API 获取引入 SVG 文件的内容，并将其解析为文本。
创建 DOMParser： 创建一个 DOMParser 对象，用于将 SVG 文本解析为文档对象模型 (DOM)。
解析 SVG 文本： 使用 DOMParser 的 parseFromString 方法将 SVG 文本解析为 DOM。
获取 SVG 根元素： 从解析的 DOM 中获取 SVG 的根元素（通常是
将 SVG 元素添加到页面： 使用 DOM API 将 SVG 根元素添加到指定的目标容器中。

以下代码示例演示了如何实现此过程：

<div id="test"></div>

登录后复制

fetch('https://static.segmentfault.com/main_site_next/614d2165/_next/static/media/sf-icon-small.4d244289.svg')
    .then(body => body.text())
    .then(svg => (new DOMParser).parseFromString(svg, 'image/svg+xml'))
    .then(actualSVG => {
        // append to the body or do your thing
        document.querySelector('#test').appendChild(actualSVG.documentElement)
    });

登录后复制

以上就是如何将 SVG 文件引入网页并显示其内容？的详细内容，更多请关注php中文网其它相关文章！