您现在的位置是：网站首页> 编程资料编程资料

HTML页面插入SVG的多种方式纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果

2023-10-09 292人已围观

简介 SVG是一种基于XML语法的图像格式，接下来通过本文给大家介绍HTML页面插入SVG的多种方式，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

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);

总结

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

上一篇：table中cesllspacing与cellpadding的区别详解IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug

下一篇：html网页添加音乐视频的实现示例html5视频常用API接口的实战示例Html5 video标签视频的最佳实践html5自动播放mov格式视频的实例代码HTML5自定义视频播放器源码HTML5 播放 RTSP 视频的实例代码HTML5 视频播放(video),JavaScript控制视频的实例代码HTML5视频播放插件 video.js介绍 实现简易html视频播放器的方法HTML5 解决苹果手机不能自动播放音乐问题HTML5网页音乐播放器的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢