svg.md

• svg可以嵌套svg,当然还有别的标签，

  • 形状类的：circle，rect，ellipse，line，polyline, polygon，path
  • 其他显示类的：marker, text, image, a, tspan, textpath
  • 其他：g, defs, symbol, use, tref,

• 以上搬砖注意中，特殊的有

  • path，里面的参数，大写表示绝对坐标，小写表示相对对坐。
  • path 画弧线的时候，参数是：椭圆长轴 短轴 x轴旋转的角度 大角度还是小角度 正角度还是负数角度 结束点坐标x 结束点坐标 y.（其实就是定义了起点跟终点，然后根据椭圆的半径、正负角，给两点画曲线）
  • path 画曲线的时候，起点默认为第一个控制点，我们只需要提供另外的控制点。在画连续的光滑的曲线的时候，后一段曲线的起始控制点就是上一段曲线的结束控制点，同时，第二个控制点由于必须跟上一条曲线对称，所以默认相当于，就定下了两个控制点.（贝塞尔曲线动画的原理，应该是t跟曲线y坐标的关系，构成一张完成进度（由y坐标，跟起点跟终点y坐标的差的绝对值的比值来计算）跟t的坐标系，）
  • 各类图形都可以加上marker-start mid end属性，可以在每个图形经过的点上，加上一些好看的标记。
  • g里的元素会继承g里的一些属性或者样式
  • textpath按照引用的路径显示文字
  • text里有很多属性，用于控制文字是位置，字母间距，单词间距，文本显示方向，样式，文本长度自适应方案等

• 在svg里应用样式

  • 内联在svg里的<style></style>
  • 直接写style属性，给标签
  • <?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>引入外部css
  • svg css 属性，跟普通dom的css属性不大一样，主要是设置stroke 样式，透明，连接线头样式，还有fill 属性同理，文本相关的就是设置基线，对齐，文字方向，间距之类的，渐变就有stop-color跟stop-opacity

• 视口跟视图框

<svg width="500" height="200" viewBox="0 0 50 20" >
   <rect x="20" y="10" width="10" height="5"
         style="stroke: #000000; fill:none;"/>
</svg>
viewBox的含义是，先把react画在viewBox的坐标系里，然后拉伸viewbox的坐标系，到宽度500，或者y为200
preserveAspectRatio就是设置，拉伸过程中，以缩放比例小的来拉伸，还是大的来拉伸

• svg动画，是一个标签，嵌在图形标签里的animate或者set animateTransform之类的标签，搬砖查文档。当然也可以用js修改属性的方式做动画
• 填充的的时候可以使用颜色渐变，线性渐变，只需要指定起点跟终点，渐变就往哪儿渐变，放射性渐变指定远点跟半径。其实大概的意思就是给个方向，或者给块区域，来做渐变
• 填充也可以使用定义好的pattern，来填充
• 还有mask跟滤镜，暂时补讲了，用不上