SVG学习总结

SVG(Scalable Vector Graphics) 可缩放矢量图 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

svg的一些优势：

• SVG 可被非常多的 工具 读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

svg可通过 <object>,<embed>,<iframe> 标签引入html中。

图形绘制中的一些tips

• 显示层次由标签自上至下顺序指定
• stroke-dasharray: 虚线定义 显示隐藏像素数循环
• rect的弧度 由rx,ry指定 如果存在一个值未定义 则默和已存在的值相等。
• X1,y1 x2,y2作为点位置的书写方式

SVG通过视窗、视野控制svg的显示

• 视窗由svg的width,height控制 视野有viewBox属性控制
• 视窗是html引入svg的显示大小。视野是svg上会被显示的的区域。先通过视野获取显示内容，再缩放适配到视窗。
• 默认视窗的大小是300px、150px
• viewBox 注意 B 大写。否则无效
• 如果不指定视窗尺寸 但指定viewBox视野 则默认填充
• 视窗，视野都指定并且成比例。则经过缩放直接适配。如果二者不等比例。则需要preserveAspectRatio属性来确定填充策略。
  preserveAspectRatio

当第二个参数选择meet/slice时 就会出现某个方向未被填满，或者溢出的情况需要设置x,y方向的对齐策略

两行组合在一起x在前，y在后组成第一个参数

黑色矩形为视野，虚线矩形为视窗

渐变

线性渐变

<defs>
    <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
    </linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
复制代码

• 渐变方式独立定义
• x1,y1,x2,y2描述渐变方向
• 如果offset如果出现逆序 例如：50% green,30% red 30%会变为50% 圆滑过度的绿色的另一半变成红色。并且有明显的红绿分隔线。