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（默认）	保持长宽比,整个viewBox在viewport中可见； 图形每每缩小
slice	保持长宽比,viewBox覆盖viewport的所有区域； 图形每每放大
none	不在保持长宽比，直接拉伸缩放，但若是第一个参数存在则无效

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

第一个参数	描述
xMin/xMid/xMax	x方向左对齐，居中对齐，右对齐
YMin/YMid/YMax（Y大写）	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% 圆滑过分的绿色的另外一半变成红色。而且有明显的红绿分隔线。

放射渐变

cx,cy 径向渐变的中心点X和Y坐标。它的值使用用填充的百分比值。若是没有定义则默认值为50%
fx, fy 径向渐变的焦点X和Y值。它的值使用用填充的百分比值。若是没有定义则默认值为50%。
注意：在Firefox 3.05中若是值低于5%可能会发生问题。
**径向渐变的聚焦点是颜色辐射的角度。**你能够将径向渐变想象为一盏灯，那么聚焦点决定灯光从什么方向“照射”在图形上。50%,50%表示在图形的正上方， r 径向渐变的半径

变换

相似于css tranform语法 能够线性叠加