svg
什么是svg
是
Scalable Vector Graphics的简称,中文为可缩放矢量图形,web页面矢量图.
优势
1.SVG可被非常多的工具读取和修改（比如记事本）
2.SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
3.SVG是可伸缩的
4.SVG图像可在任何的分辨率下被高质量地打印
5.SVG可在图像质量不下降的情况下被放大
6.SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7.SVG可以与Java技术一起运行
7.SVG是开放的标准
8.SVG文件是纯粹的XML
在web浏览器钟显示SVG
1:使用<iframe> 元素嵌入SVG图像
2:使用<img>元素嵌入SVG图像
3:将SVG图像作为背景图插入
4:直接使用<SVG>元素
5:使用<embed>元素来嵌入SVG图像
6:使用<object>元素嵌入SVG图像
<iframe src="../img/svg/img1.svg" width="200px" ></iframe> 只会显示图片一部分
<image src="../img/svg/img1.svg" width="200px"></image> 会等比缩放全部显示
<div style="background: url('../img/svg/img1.svg') no-repeat center;background-size: 200px 300px;width: 200px;height: 300px"></div> 元素也要设置宽和高
<div><svg></svg></div> svg为图片矢量数据 把图片数据直接丢进去就行
<embed src="../img/svg/img1.svg" width="400px" height="400px" type="image/svg+xml"></embed> 加上type
<object data="../img/svg/img1.svg" width="50%" height="50%"></object> 注意这里是data
以上的svg图片宽和高都可以设置百分比
方法
在使用JS在页面上对HTML进行操作时,一个很重要的对象是docuemnt,无论是获取还是创建dom对象,都要通过document,如果SVG是直接嵌套在HTMl内容中,就会公用一个docunemnt,从而获取SVG元素对象.但是SVG在多数时候,SVG并不会直接嵌套在HTML之中重现出来,更多时候通过:
一:IMG标签引进,或通过背景图片css url引入,SVG只是单纯的当做图片来使用,所以**无法使用JS来操作它们**。
二:通过object,embed或者iframe标签将SVG文件引入到HTML页面上呈现出来,对于这种情况，标签实际上会把data或src属性指定的内容相对独立的引入到页面上来.这就使得其中的内容有完全属于自己的document对象.**导致原来的document对象无法获得上述标签引入的SVG文档中元素,更不用说操作里面的属性了**.但是**我们可以通过一个方法获取所引用的SVG文档的document对象,那就是getSVGDocument().例如document.getElementById("android-down").getSVGDocument()
当然getSVGDocument()是需要浏览器支持才行.对于目前最新浏览器来说这些都是标配方法,如果通过object和iframe引入SVG文件，除了getSVGDocuemnt()，还可以使用contentDocument属性获取其引入文档对应的document对象.区别在于如果引入的不是SVG文件,而是XML或HTML等等,contentDocument依然会返回对象,而getSVGDocument()则返回null.注意有同源策略限制,非同源,浏览器就会禁止docuemnt对象
在动态添加SVG图片时,XML是有命名空间的.命名空间通过JS创建SVG对象的时候就会引起一些麻烦.不是通过createElement()创建的。
要通过var c = document.createElementNS('http://www.w3.org/2000/svg','circle');创建时并把http://www.w3.org/2000/svg命名空间作为第一个参数传进去
本文参考
https://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html © w3cplus.com
网友评论