HTML页面插入SVG的多种方式

SVG (Scalable Vector Graphics) 可缩放矢量图,是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积相对较小,且放大时也不会失真。

插入svg标签

直接使用 标签插入内容到网页中,成为DOM的一部分,然后可以使用CSS和JS进行控制。

一个简单的圆:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//可以用CSS控制SVG的样式,但属性与普通的网页元素不同
 
   #testSvg {border:1px solid #ccc;}
   #testSvg circle {
    fill: red;
    stroke: blue;
    stroke-width: 3;
   }
 
 
//可以用JS操作SVG,制作简单的动画等
 
   var circle = document.getElementById("testCircle");
   circle.addEventListener("click", function(e) {
    console.log("Click circle ...");
    circle.setAttribute("r", 65);
   }, false);
 
 
//除了用JS操作外,可以用SVG自带的animate制作动画效果

展示效果:

插入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 decoding="async" src="test.svg'">
//或者SVG的base64编码
<img decoding="async" src="image/svg+xml;base64,%5Bdata%5D">
 
//使用标签
 
//获取SVG DOM
var embedSvg = document.getElementById("embedSvg").getSVGDocument();
console.log("SVG DOM: ", embedSvg);
         
//使用<object data-origwidth="" data-origheight="" style="width: 1264px;">标签
<object data-origwidth="" data-origheight="" style="width: 500px;"></object>
//获取SVG DOM
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);
 
//使用标签
 
//获取SVG DOM
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);</object>

SVG DOM输出:

把svg作为其他网页元素的背景图片

这是一种变相的把svg插入网页的方式,即把svg作为普通的图片使用,无法展示动画效果。

1
2
3
4
5
6
7
    .svg-div {
        width:400px;
        height:300px;
        background:url("test.svg") no-repeat center / 50%;
        border:1px solid #ccc;
    }
<div class="svg-div"></div>

效果:

读取SVG源码

因为SVG文件实质上就是一段XML文本,因此可以通过读取XML代码的方式,读取SVG源码。

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

总结

到此这篇关于HTML页面插入SVG的多种方式的文章就介绍到这了,更多相关html插入svg内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html/13548.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部