关于SVG的一点点学习

原文地址：https://zhuanlan.zhihu.com/p/25016633

<?xml version="1.0" standalone="no"?>
<svg width="600" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!--矩形-->
  <rect x="10" y="10" width="30" height="60" stroke="#9B7B56" fill="transparent" stroke-width="10"/>

x，y为起点坐标值，width,height为高度和宽度值。（似乎svg有默认的margin之类的东西？）stroke是边框颜色，fill是填充，也可设置颜色。

stroke-width是宽度

  <!--圆角矩形-->
  <rect x="60" y="10" rx="10" ry="10" width="60" height="40" stroke="#FF9090" fill="transparent" stroke-width="5"/> 

圆角矩形的圆角也是可以设成椭圆形的，用rx,ry指定即可。

  <!--圆形-->
  <circle cx="180" cy="50" r="40" stroke="green" fill="#C3413D" stroke-width="5"/>  
   <!--椭圆-->
  <ellipse cx="320" cy="28" rx="80" ry="20" stroke="#FFC302" fill="transparent" stroke-width="5"/> 
  <!--直线-->
  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <!--折线-->
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" 
            stroke="#9B7B56" fill="transparent" stroke-width="5"/>
  <!--多边形-->
  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" 
           stroke="#FFC302" fill="transparent" stroke-width="5"/>
  <!--路径 -->
  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="#9B7B56" stroke-width="5"/>
M为移动命令，Q为二次贝塞尔曲线，后跟两个点坐标。T为平滑二次曲线的缩写
</svg>

多边形是闭合的，折线不是。

其他重要元素

• <svg>：SVG的根元素，并且可以相互嵌套；
• <g>：用来将SVG中的元素进行分组操作，分组后可以看成一个单独的形状，统一进行转换，同时g元素的样式可以被子元素继承，但是它没有X,Y属性，不过可以通过transform来移动它；
  
• <def>：用于定义在SVG中可重用的元素，def元素不会直接展示出来，可以通过use元素来引用；
• <use>：通过它来复用def元素，也包括<g>、<symbol>元素，使用<use xlink: href="#id"/>即可调用；
• <text>：可以用它来实现word中的那种“艺术字”，很神奇的一个功能；
• <image>：用它可以在SVG中嵌套对应的图片，并可以在图片上和周围做对应的处理。

轮廓 stroke

stroke用于设置绘制对象线条的颜色，同时stroke有如下属性：

• stroke-width：设置轮廓的宽度；
  
• stroke-linecap：设置轮廓结尾处的渲染方式，value有butt(直接一刀切断)、square(保留一点切断)、round(圆弧切断) 3个设置值；
  
• stroke-linejoin：用于设置两条线之间的连接方式，value有miter(尖角连接)、round(圆弧连接)、bevel(切断连接) 3个设置值；
  
• stroke-opacity：用于设置描边的不透明度；
• stroke-dasharray + stroke-dashoffset：stroke-dasharray用于使用虚线呈现SVG形状的描边，需要提供一个数值数组来描述，定义破折号和空格的长度；stroke-dashoffset用于设置虚线模式中的开始点；

填充 fill

fill用来描述SVG对象内部的颜色，除此还有如下两个属性：

• fill-opacity：用于设置填充颜色的不透明度；
  
• fill-rule：用于设置填充的方式，value有nonzero、evenodd 两个值
  
  • nonzero：从一个点往任何方向上绘制一条射线，形状中的路径每次穿过此射线时，如果路径从左到右穿过射线，则计数器加1，如果路径从右到左穿过射线，则计数器减1。计数器总数为0时候，则该点被认为在路径外。如果计数器非0，则该点被认为在路径内。
    
  • evenodd：从一个点往任何方向上绘制一条射线。每次路径穿过射线，计数器加1。如果总数是偶数，则点在外部。如果总计数为奇数，点在形状内。
    

变换 transform

此属性和css3中的transform相类似，有translate、rotate、scale、skew(skewX和skew函数使x轴和y轴倾斜)、matrix(矩阵变换

五、动画

在SVG中动画元素主要分成如下4类，同时也可以*组合。

• <set>：用于设置延迟，譬如设置5s后元素位置颜色变化，但是此元素没有动画效果；
• <animate>：基础动画属性，用于实现单属性的动画过度效果；
• <animateTransform>：实现transform变换动画效果，可以类比CSS3中的transform；
• <animateMotion>：实现路径动画效果，让元素沿着对于path运动；

有了元素以后还需要有对应的属性用来表示动画的特征，譬如：要动画的元素属性名称、起始值、结束值、变化值、开始时间、结束时间、重复次数、动画速度曲线函数等等。

六、使用方式

我们可以使用如下4种常用的方式来加载我们的SVG，此处可以将svg转换成base64的方式。

通过Img标签：

<img src="tw93.svg" alt="Hello SVG" height="65" width="68">

通过CSS background：

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

通过object：

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

直接内置到Html中

不想学了，啥都不想学了。