今天分享下”多种前端插入SVG的方式代码“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 SVG (Scalable Vector Graphics) 可放缩矢量图片，是一种根据XML英语的语法的图像格式。别的图像格式全是根据清晰度解决的，SVG则是归属于对图片的样子叙述，因此 它实质上是文本文件，容积相比较小，且变大时也不会失真。
插入svg标签
立即应用
一个简洁的圆：
<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 = http://www.qlyl1688.com/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文件
可以使用 等标签把SVG文件插入到网页中。
除 外，其他都应该使用双标签形式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//使用<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 DOM（http://www.qlyl1688.com）
var embedSvg = document.getElementById(“embedSvg”).getSVGDocument();
console.log("SVG DOM: ", embedSvg);
//使用<object>标签
<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//获取SVG DOM
var objectSvg = document.getElementById(“objectSvg”).getSVGDocument();
console.log("SVG DOM: ", objectSvg);
//使用<iframe>标签
<iframe id="iframeSvg" src="test.svg"></iframe>
//获取SVG DOM
var iframeSvg = document.getElementById(“iframeSvg”).contentDocument;
console.log("SVG DOM: ", iframeSvg);
SVG DOM输出：
把svg作为其他网页元素的背景图片
这是一种变相的把svg插入网页的方式，即把svg作为普通的图片使用，无法展示动画效果。
1
2
3
4
5
6
7
8
9
10
<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源码。
1
2
var svgStr = new XMLSerializer().serializeToString(document.getElementById(“testSvg”));
console.log(svgStr);
今天的文章就分享到这啦，内容转自脚本之家，下篇文章再见！
9160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
