文章列表
相关文章
更多最近更新
更多SVG 嵌入到HTML页面
2019-05-06 23:44|来源: 网路
SVG 在 HTML 页面
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。
使用 <embed> 标签
<embed>:
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
语法:
<embed src="circle1.svg" type="image/svg+xml" />
结果：
使用 <object> 标签
<object>:
优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
缺点：不允许使用脚本。
语法:
<object data="circle1.svg" type="image/svg+xml"></object>
结果：
使用 <iframe> 标签
<iframe>:
优势：所有主要浏览器都支持，并允许使用脚本
缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
语法:
<iframe src="circle1.svg"></iframe>
结果:
直接在HTML嵌入SVG代码
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。
注意：SVG不能直接嵌入到Opera。
实例
<html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> </body> </html>
运行结果
链接到SVG文件
您还可以用<a>标签链接到一个SVG文件：链接到SVG文件
您还可以用<a>标签链接到一个SVG文件：
<a href="circle1.svg">View SVG file</a>
相关问答
更多-
需要牢记的一点是，SVG文档正在用XML文档讨论SVG中的XHTML。 您没有使用XML，而是使用HTML。 这是HTML解析器的一个功能，它以您看到的方式合并主体标签。 如果您使用的是XML解析器，则不会发生该合并。 要实现这一点，您需要使用application/xhtml+xml内容类型来提供文档。 如果你这样做了，那么你需要修复其他问题，比如为你的html元素添加一个xmlns="http://www.w3.org/1999/xhtml"属性。 遵循robertc的建议要容易得多。 One thin ...
-
是的，使用
元素，请参阅这个问题的一些例子。 或者，如果您有一个html5文档，您还可以使用CSS定位和z-index来将html的部分显示在您想要放置在svg顶部的位置。 如果你这样做，你不需要嵌套svg片段内的html。 这将使您在我的经验中跨浏览器最一致的行为。 Yes, with the element, see this question for some examples. Alternatively, if you have an h ... -
在SVG中嵌入SVG？(Embed SVG in SVG?)[2023-02-06]
使用image元素并引用您的SVG文件。 为了好玩，请将以下内容保存为recursion.svg ：