HTML页面插入SVG的多种方式 游戏攻略
SVG (Scalable Vector Graphics) 可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。
插入svg标签
直接使用 标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。
一个简单的圆：
//可以用CSS控制SVG的样式，但属性与普通的网页元素不同 //可以用JS操作SVG，制作简单的动画等 //除了用JS操作外，可以用SVG自带的animate制作动画效果
展示效果：
插入svg文件
可以使用 SVG%20DOM输出：
//获取SVG%20DOM
var%20iframeSvg%20=%20document.getElementById("iframeSvg").contentDocument;
console.log("SVG%20DOM:%20",%20iframeSvg);
把svg作为其他网页元素的背景图片
这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。
效果：
读取SVG源码
因为SVG文件实质上就是一段XML文本，因此可以通过读取XML代码的方式，读取SVG源码。
var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
console.log(svgStr);
总结
到此这篇关于HTML页面插入SVG的多种方式的文章就介绍到这了,更多相关html插入svg内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/HTML/70368.html
