我是不是消失很久了。。。。大概3个月没有记录过博客了,很多次打开之后懒得记录又关闭了。。。
懒惰是魔鬼,大家不要像我学习🙈🙈🙈
最近项目一直遇到一个问题,就是和svg有关的,svg虽然出来很久了但是坑还是很多的,我把我遇到的问题记录一下和大家分享~
一. svg简介
在 2003 年一月,SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有:Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比,使用 SVG 的优势在于:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
二. svg在html中加载
如果svg直接作为代码段嵌套在html页面中,那么用户就和操作普通的don元素一样去操作svg即可,
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>
但是如果是使用a标签或者img标签,那么就是一个资源加载,是无法使用js去操作dom的,比如修改属性什么的
<a href="circle1.svg">View SVG file</a>
//or
<img src="circle1.svg" alt="svg"/>
三. 兼容性
一图已言之:
svg兼容性
四. 操作svg的第三方库
svg的本身的标签也很简单,但是比较繁琐,可以使用第三方库snap.js
官网:http://snapsvg.io/
国内比较好的一个中文网址案例:https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php
五. svg转png的坑!
重点来来,这个是大坑好吗!!!
svg是作为矢量图,那么正常转换也是可以的,比如采用html2canvas截图,也可以参考我的这篇文章
坑1:如果你的svg中的文字包含第三方字体,svg矢量元素那么转换后的字体是丢失的!
坑2:svg中转 canvas,如果svg中包含文字路径textpath,并且使用了第三方canvas库fabric.js,那么textpath是会丢失的; 坑3:svg转canvas,svg中的一些信息会丢失