svg使用小计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg使用小计相关的知识，希望对你有一定的参考价值。
最近接触SVG这种矢量格式，感觉不错。
做一下小的总结，备忘用。
因为基础的图是用Visio画的，而又发现SVG不错，而又发现Visio可以直接另存为SVG格式，所以就将画好的Visio图直接另存为SVG文件。不过有优点也有缺点。
优点是转化后的SVG文件，几乎完美的再现了Visio图的所有图形属性。
所有的图形不论是形状、位置、线条都完全一致，之所以说几乎，是因为在Visio图中写的文字注释，在SVG的显示中某些部分会稍稍有一点点的错位，总的来说没啥问题，可以接受。
缺点就是Visio图中所体现的图形之间的逻辑关系没有了，只剩下图形属性和空间关系（坐标等）
那么，拿到SVG文件，打开查看内容，第一眼看去就是一个xml，但是浏览器可以直接打开，很神奇，而且是矢量图。
那么，我第一个想到的就是用javascript操控它。
经过一系列不成功的尝试，最后找到办法，那就是把SVG嵌入到html中。
在百度一搜“把SVG嵌入HTML”，基本会看到一堆人写的四种方式。
前三种是：embed、object、iframe
即在这三种标签中引入要嵌入的svg文件的路径
embed与iframe用的是
src="xxx.svg"
object用的是
data="xxx.svg"
给我的感觉就是都不好用
那就剩第四种了，也就是把整个svg文件的内容复制粘贴到html的body里
还有最起码，svg标签得设个id
<svg id="svg>
假设我的SVG文件内容是这个样子滴
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in" viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg"> <g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g"> <g></g> </g> </svg>
如上就是被我简化了的由Visio转化而来的
最外面只有一个svg标签，我把它的id设成svg
svg下有一个g标签，我把它的id设成g
而g标签下又有一堆的g标签，而这些个g标签都自动设置好了id，就不赘述了
唯一需要我手动设置id的是就最外面的svg标签和其下一层唯一的元素那个g标签
设置了id就可以用js来进行操控了，hiahiahia
其实我所转化的svg文件，有一万多行（因为来源的Visio图就很大，图形灰常多）
然后我们把这个svg文件的所有内容全都copy paste到html的春天里，哦不，是body里，就变成下面这样了
<html> <head></head> <body> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in" viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg"> <g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g"> <g></g> </g> </svg> <body> </html>
好吧，万里长征第一步
当然，肯定要有第二步第三步……或者倒叙手法的第0步之类的
后面接着说
本文出自 “树下野兽” 博客，请务必保留此出处http://shuxiayeshou.blog.51cto.com/4452347/1759972
以上是关于svg使用小计的主要内容，如果未能解决你的问题，请参考以下文章