HTML页⾯插⼊SVG的多种⽅式
SVG (Scalable Vector Graphics) 可缩放⽮量图，是⼀种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是⽂本⽂件，体积相对较⼩，且放⼤时也不会失真。
插⼊svg标签
直接使⽤<svg>标签插⼊内容到⽹页中，成为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 = ElementById("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⽂件
可以使⽤<img><embed><object><iframe>等标签把SVG⽂件插⼊到⽹页中。
除<img>外，其他都应该使⽤双标签形式。
//使⽤<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
var embedSvg = ElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
//使⽤<object>标签
<object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//获取SVG DOM
var objectSvg = ElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);
//使⽤<iframe>标签
<iframe id="iframeSvg" src="test.svg"></iframe>
//获取SVG DOM
var iframeSvg = ElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);
SVG DOM输出：
把svg作为其他⽹页元素的背景图⽚
这是⼀种变相的把svg插⼊⽹页的⽅式，即把svg作为普通的图⽚使⽤，⽆法展⽰动画效果。
<style type="text/css">
.svg-div {
width:400px;
height:300px;html网页格式
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().ElementById("testSvg"));
console.log(svgStr);
总结
到此这篇关于HTML页⾯插⼊SVG的多种⽅式的⽂章就介绍到这了，更多相关html插⼊svg内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。