HTML网页页面插进SVG的多种多样方法

SVG (Scalable Vector Graphics) 可放缩矢量图,是1种根据XML英语的语法的图象文件格式。别的图象文件格式全是根据像素解决的,SVG则是属于对图象的样子叙述,因此它实质上是文字文档,体积相对性较小,且变大时也不容易失真。

插进svg标识

立即应用 <svg> 标识插进內容到网页页面中,变成DOM的1一部分,随后可使用CSS和JS开展操纵。

1个简易的圆:

<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文档

可使用 <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 = 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做为别的网页页面元素的情况照片

这是1种变相的把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文档本质上便是1段XML文字,因而能够根据载入XML编码的方法,载入SVG源代码。

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
console.log(svgStr);

总结

到此这篇有关HTML网页页面插进SVG的多种多样方法的文章内容就详细介绍到这了,更多有关html插进svg內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!