html5-svg标签使用基础三

html5-svg 标签滤镜（Path）

<svg width="100%" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M281,150 c0,71.797-59.203,131-131,131S19,221.797,19,150S78.203,19,150,19S281,78.203,281,150z"/>
</svg>

<svg width="100%" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M251,150 c0,93.5-29.203,143-101,143 S49,243.5,49,150 C49,52.5,78.203,7,150,7 S251,51.5,251,150 z"/>
</svg>

它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
<svg width="100%" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>





        M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

<svg width="100%" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>



绘制圆弧指令：A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂，情况也很多，所以这个命令有7个参数，分别控制曲线的的各个属性。下面解释一下数值的含义：
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
x,y 是弧终端坐标。
前两个参数和后两个参数就不多说了，很简单；下面就说说中间的3个参数：
x-axis-rotation代表旋转的角度，体会下面例子中圆弧的不同：

<svg width="320px" height="320px">
<path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

就是(x1,y1)和(x2,y2)，最后面(x,y)代表曲线的终点
<svg width="190px" height="160px">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
 <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
 <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
 <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
 <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
 <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

<svg width="190px" height="160px">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
<svg width="190px" height="160px">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

html5-svg Path 应用

<svg width="500px" height="500px" viewBox="0 0 1000 1000">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
 
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">   
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" 
    additive="replace" fill="freeze"/>
</path>
 
<path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
 <animateTransform attributeName="transform" attributeType="XML"type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
 </path> 
 
<path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
   <animateTransform attributeName="transform" attributeType="XML"type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
</path>
 
<path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
<animateTransform attributeName="transform" attributeType="XML"type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
 </path>
 
<path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
<animateTransform attributeName="transform" attributeType="XML"type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
</path>
 
<path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
 </path>
 
<path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
    additive="replace" fill="freeze"/>
</path> 
 
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
        <feImage xlink:href="#yellow" x="0" y="0" result="2"/>
<feImage xlink:href="#green" x="0" y="0" result="3"/>
<feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
<feImage xlink:href="#blue" x="0" y="0" result="5"/>
<feImage xlink:href="#violet" x="0" y="0" result="6"/>
<feImage xlink:href="#pink" x="0" y="0" result="7"/>
<feImage xlink:href="#red" x="0" y="0" result="8"/>
   
<feBlend mode="multiply" in="1" in2="2" result="12"/>
     <feBlend mode="multiply" in="12" in2="3" result="123"/>
     <feBlend mode="multiply" in="123" in2="4" result="1234"/>
      <feBlend mode="multiply" in="1234" in2="5" result="12345"/>
      <feBlend mode="multiply" in="12345" in2="6" result="123456"/>
      <feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
      <feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
<feColorMatrix type="hueRotate" values="0">
 <animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
</feColorMatrix>
</filter>
 
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>