HTML页面-ip查询-插入SVG的多种方式

SVG是一种根据XML语法的图画格式,接下来通过本文给我们介绍HTML页面刺进SVG的多种办法,通过ip查询实例代码给我们介绍的十分详细,对我们的学习或工作具有一定的参看借鉴价值,需求的朋友参看下吧

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

刺进svg标签

直接运用  标签刺进内容到网页中,成为DOM的一部分,然后能够运用CSS和JS进行操控。

一个简略的圆:

//能够用CSS操控SVG的样式,但特点与一般的网页元素不同

//能够用JS操作SVG,制造简略的动画等

//除了用JS操作外,能够用SVG自带的animate制造动画效果

展示效果:

刺进svg文件

能够运用    
//获取SVG DOM
var iframeSvg = document.getElementById(“iframeSvg”).contentDocument;
console.log(“SVG DOM: “, iframeSvg);

SVG DOM输出:

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

这是一种变相的把svg刺进网页的办法,即把svg作为一般的图片运用,无法展示动画效果。

效果:

读取SVG源码

由于SVG文件实质上就是一段XML文本,因而能够通过读取XML代码的办法,读取SVG源码。

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

共有 0 条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注