svg path大法d属性详解

smallStone

svg:
path有d属性,而d属性是最牛B的!

<svg width="100%" height="100%">
 <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>
M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY):平滑曲率
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径
  • M:画笔起始位置
  • L:画直线(x,y)坐标
  • Z:自动闭合
  • fill: 填充颜色
  • stroke:描边颜色
  • stroke-width:描边宽度
  • transform="translate(x,y)": 加了描边后需要平移(x=stroke-width/2,
    y=stroke-width/2)

在需求中也许设计师设计了个渐变色用以下方法:

<svg width="100%" height="100%">
    <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>
    <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="url(#orange_red)" stroke-width="10" transform="translate(5,5)"></path>
</svg>
  • 把fill="url(#orange_red)"就成了渐变填充,如果把stroke="url(#orange_red)"描边渐变填充了;效果图如下:

clipboard.png
clipboard.png

<svg width="100%" height="100%">
    <path d="M0,40 H240" stroke="#333" stroke-width="10"></path>
    //画笔移动到0,40 画水平线到240,垂直线反之
</svg>
  • H:水平直线,既保持Y坐标不变
  • V:垂直直线,既保持X坐标不变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>
  • stroke-linecap:butt | round | square;如图:

clipboard.png

如果是虚线:

<svg width="100%" height="100%">
        <path d="M0,40 H240" stroke="#333" stroke-width="10" transform="translate(5,5)" stroke-dasharray="20" stroke-dashoffset="10"></path>
        //间隔20像素绘制一次
    </svg>

clipboard.png

stroke-dasharray:(Number)间隔多少像素绘制一次

stroke-dashoffset:(Number) 每次绘制偏离多少,必须配合stroke-dasharray使用

下一节我讲一下path的三次贝塞尔曲线使用方法!

线性代数:

clipboard.png

解决svg线条粗细不一

svg line {
    shape-rendering: crispEdges;
} 
阅读 29.7k

smallhuifei的技术博客
每天积累一点,多了就发现简单了!

前端一枚^_-

164 声望
27 粉丝
0 条评论
你知道吗?

前端一枚^_-

164 声望
27 粉丝
宣传栏