这篇文章给大家分享的是“HTML页面插入SVG有什么方式，读取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 = 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作为其他网页元素的背景图片

这是一种变相的把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有什么方式，读取SVG怎么做”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Amazeui时间组件能够实现什么样效果，用法是怎样

  这篇文章主要介绍了amazeui时间组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 前端CSS相关面试题有哪些，怎么解答

  之前的文章《web前端笔试题库之HTML篇​》中，我们分享了一些关于HTML的前端面试题。下面本篇文章就接着上一篇，分享css部分的笔试题（附答案），大家快看看能答对几个！

• AmazeUI中怎么制作多种类型的列表，方法是什么

  这篇文章主要介绍了AmazeUI 列表的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• HTML5中外链嵌入页面通信怎么实现，方法是什么

  这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用HTML怎么实现罗盘式时钟，代码是什么

  看着有点黑科技的感觉就跟前段时间比较火的抖音动态时间那个一个效果，本文主要介绍了HTML 罗盘式时钟的实现，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧