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 = 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=http://www.jb51.net/web/"test.svg'" /> //可能SVG的base64编码 <img src=http://www.jb51.net/web/"data:image/svg+xml;base64,[data]" /> //行使<embed>标签 <embed id="embedSvg" type="image/svg+xml" src=http://www.jb51.net/web/"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=http://www.jb51.net/web/"test.svg"></object> //获取SVG DOM var objectSvg = document.getElementById("objectSvg").getSVGDocument(); console.log("SVG DOM: ", objectSvg); //行使<iframe>标签 <iframe id="iframeSvg" src=http://www.jb51.net/web/"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);

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!