HTML页面插入SVG的多种方式
互联网品牌圈关注到HTML页面插入SVG的多种方式
SVG是一种基于XML语法的图像格式，接下来通过本文给大家介绍HTML页面插入SVG的多种方式，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
SVG (Scalable Vector Graphics)可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。
插入svg标签
直接使用<code><svg></code>标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。
一个简单的圆：
<svg width="400" heihgt="300" id="testSvg"> <circle cx="100" cy="100" r="50" fill="red" stroke="black" strock-width="2" id="testCircle"></circle></svg>
//可以用CSS控制SVG的样式，但属性与普通的网页元素不同<style type="text/css"> #testSvg {border:1px solid #ccc;} #testSvg circle { fill: red; stroke: blue; stroke-width: 3; }</style>
//可以用JS操作SVG，制作简单的动画等<script type="text/javascript"> var circle = document.getElementById("testCircle"); circle.addEventListener("click", function(e) { console.log("Click circle ..."); circle.setAttribute("r", 65); }, false);</script>
//除了用JS操作外，可以用SVG自带的animate制作动画效果<svg width="400" height="300" id="testSvg"> <circle cx="100" cy="100" r="50" id="testCircle"> <animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate> </circle></svg>
展示效果：
插入svg文件
可以使用<code><img></code><code><embed></code><code><object></code><code><iframe></code>等标签把SVG文件插入到网页中。除<code><img></code>外，其他都应该使用双标签形式。
//使用<img>标签<img src="test.svg'" />//或者SVG的base64编码<img src="data:image/svg+xml;base64,[data]" />
//使用<embed>标签<embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>//获取SVG DOMvar embedSvg = document.getElementById("embedSvg").getSVGDocument();console.log("SVG DOM: ", embedSvg); //使用<object>标签<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>//获取SVG DOMvar objectSvg = document.getElementById("objectSvg").getSVGDocument();console.log("SVG DOM: ", objectSvg);
//使用<iframe>标签<iframe id="iframeSvg" src="test.svg"></iframe>//获取SVG DOMvar iframeSvg = document.getElementById("iframeSvg").contentDocument;console.log("SVG DOM: ", iframeSvg);
SVG DOM输出：
把svg作为其他网页元素的背景图片
这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。
<style type="text/css"> .svg-div { width:400px; height:300px; background:url("test.svg") no-repeat center / 50%; border:1px solid #ccc; }</style>
<div class="svg-div"></div>
效果：
读取SVG源码
因为SVG文件实质上就是一段XML文本，因此可以通过读取XML代码的方式，读取SVG源码。
var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));console.log(svgStr);
总结
到此这篇关于HTML页面插入SVG的多种方式的文章就介绍到这了,更多相关html插入svg内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/web/720878.html
尊敬的看官您对HTML页面插入SVG的多种方式有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: 企业网站为什么要改版要注意些什么 返 回 下一篇:table中cesllspacing与cellpadding的区别详解
