SVG 的 defs 以及漸層填色

SVG 的 defs 可以用來定義各種圖形或路徑，在其它 svg 中只要用 ```<use xlink:href="#ID"/>``` 即可引用，範例如下 在這個範例中，第一個 svg 是隱藏的，純脆只定義幾個矩形，下面兩個 svg 引用後繪製圖形，在引用時可以設定裡頭的參數，而這裡設定的座標參數是相對座標 defs 的位置似忽沒有限制，範例中的 a11121_rect5 在前面使用，卻在後面才定義，結果一樣可以正常顯示 ``` $mmcode(r1) ``` <div class="mmresult r1"> <svg style="display:none;"> <defs> <g id="a11121_g1"> <rect id="a11121_rect1" width="50" height="50" x="30" y="10" fill="#f00"/> <rect id="a11121_rect2" width="50" height="50" x="30" y="80" fill="#f00"/> <rect id="a11121_rect1" width="50" height="50" x="200" y="10" fill="#000"/> <!-- a11121_rect1 重覆了 --> <text x="30" y="40" fill="#fff">x=30</text> <text x="200" y="40" fill="#fff">x=200</text> <text x="100" y="75" fill="#000">x=100</text> </g> </defs> </svg> <svg style="background-color:#afa"> <use xlink:href="#a11121_g1"/> <!-- a11121_rect1 重覆時，當使用整個 group ，一樣會顯示 --> <use xlink:href="#a11121_rect1" x="100"/> <!-- 這裡重設 x="100" 結果位置卻是在 130 也就是重設的座標是相對座標 --> <text x="130" y="40" fill="#fff">x=130</text> <use xlink:href="#a11121_rect5"/> </svg> <svg style="background-color:#aff"> <use xlink:href="#a11121_rect1"/> <use xlink:href="#a11121_rect1" x="100"/> <!-- a11121_rect1 重覆時，只會取用第一個 --> <use xlink:href="#a11121_rect2"/> <use xlink:href="#a11121_rect3" x="100"/> <defs> <rect id="a11121_rect5" width="50" height="50" x="200" y="80" fill="#0e0"/> </defs> </svg> <button id="a11121_b1" style="font-size:1em">改顏色</button> <button id="a11121_b2" style="font-size:1em">新增矩形</button> <script> (function() { $("#a11121_b1").on("click",()=> { $("#a11121_rect2").attr("fill","#00f"); }); $("#a11121_b2").on("click",()=> { $("#a11121_g1").append('<rect id="a11121_rect3" width="50" height="50" x="100" y="80" fill="#f0f"/>'); $("#a11121_g1").html($("#a11121_g1").html()); /* 光 append 一段 html 沒有作用，整個 html 置換才有作用，所以要加這一行 */ }); })(); </script> </div> <hr> # defs 的應用-漸層填色 defs 的第一個應用是漸層填色，和 CSS 的漸層填色很像，一個線性漸層和一個圓形漸層 基本範例 : ``` $mmcode(r2) ``` <div class="mmresult r2"> <svg style="background-color:#afa;width:250px;height:50px"> <defs> <linearGradient id="a11122_linear1" gradientTransform="rotate(45)"> <stop offset="0%" stop-color="#f00" /> <stop offset="100%" stop-color="#ff0" /> </linearGradient> <radialGradient id="a11122_rad1"> <stop offset="0%" stop-color="#f00" /> <stop offset="100%" stop-color="#ff0" /> </radialGradient> <rect id="a11122_rect1" width="100" height="50" x="0" y="0"/> <rect id="a11122_rect2" width="100" height="50" x="0" y="0" fill="#00f"/> <!-- 當這裡定義了 fill ，下面的 use 去設定 fill 會失效 --> </defs> <use xlink:href="#a11122_rect1" fill="url('#a11122_linear1')"/> <use xlink:href="#a11122_rect2" fill="url('#a11122_rad1')" x="120"/> </svg> <button id="a11122_b1" style="font-size:1em;">取消填色</button> <script> $(function() { $("#a11122_b1").on("click",()=> { $("#a11122_rect2").attr("fill",""); }); }); </script> </div> <hr> ## linearGradient 線性漸層 參數 : ```css x1,y1,x2,y2 從 x1,y1 漸層到 x2,y2 , 可以用 5% 或 0.5 表示 gradientTransform 和 CSS 的 transform 一樣 spreadMethod pad(預設) , reflect , repeat href 引用別處定義的 stop 值 ``` ## radialGradient 圓形漸層 ```css cx,cy,r 圓形漸層的圓心座標和半徑 gradientTransform 和 CSS 的 transform 一樣 spreadMethod pad(預設) , reflect , repeat (經測試，在 MAC的Safari 和 iphone 沒作用) fx,fy,fr 在cx,cy,r的圈圈中，漸層的中心點和半徑 href 引用別處定義的 stop 值 ``` 範例 : ``` $mmcode(r3) ``` <div class="mmresult r3"> <svg style="background-color:#afa;width:400px;height:300px"> <defs> <linearGradient id="a11123_linear1" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="pad"> <stop offset="0%" stop-color="#f00" /> <stop offset="100%" stop-color="#ff0" /> </linearGradient> <linearGradient id="a11123_linear2" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="repeat" href="#a11123_linear1"/> <linearGradient id="a11123_linear3" x1="0" y1="0" x2="0.5" y2="0.5" spreadMethod="reflect" href="#a11123_linear1"/> <radialGradient id="a11123_rad1" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="pad"> <stop offset="0" stop-color="#f00" /> <stop offset="1" stop-color="#ff0" /> </radialGradient> <radialGradient id="a11123_rad2" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="repeat" href="#a11123_rad1"/> <radialGradient id="a11123_rad3" cx="0.5" cy="0.5" r="0.3" fx="0.5" fy="0.5" fr="0" spreadMethod="reflect" href="#a11123_rad1"/> <radialGradient id="a11123_rad4" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="pad" href="#a11123_rad1"/> <radialGradient id="a11123_rad5" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="repeat" href="#a11123_rad1"/> <radialGradient id="a11123_rad6" cx="0.5" cy="0.5" r="0.3" fx="0.7" fy="0.7" fr="0" spreadMethod="reflect" href="#a11123_rad1"/> </defs> <rect width="90" height="50" x="0" y="0" fill="url('#a11123_linear1')" stroke="#000" /> <rect width="90" height="50" x="100" y="0" fill="url('#a11123_linear2')" stroke="#000" /> <rect width="90" height="50" x="200" y="0" fill="url('#a11123_linear3')" stroke="#000" /> <rect width="90" height="90" x="0" y="60" fill="url('#a11123_rad1')" stroke="#000"/> <rect width="90" height="90" x="100" y="60" fill="url('#a11123_rad2')" stroke="#000"/> <rect width="90" height="90" x="200" y="60" fill="url('#a11123_rad3')" stroke="#000"/> <rect width="90" height="90" x="0" y="160" fill="url('#a11123_rad4')" stroke="#000"/> <rect width="90" height="90" x="100" y="160" fill="url('#a11123_rad5')" stroke="#000"/> <rect width="90" height="90" x="200" y="160" fill="url('#a11123_rad6')" stroke="#000"/> </svg> </div> <hr> 既然可以用圓形漸層，就可以做出立體的球囉! ``` $mmcode(r4) ``` <div class="mmresult r4"> <svg style="width:400px;height:200px"> <defs> <radialGradient id="a11124_r1" cx="0.3" cy="0.3" r="0.7"> <stop offset="0" stop-color="#eee"></stop> <stop offset="0.3" stop-color="#888"></stop> <stop offset="0.7" stop-color="#333"></stop> <stop offset="1" stop-color="#111"></stop> </radialGradient> <radialGradient id="a11124_r2" cx="0.7" cy="0.3" r="0.7" href="#a11124_r1" /> </defs> <circle cx="100" cy="100" r="80" fill="url(#a11124_r1)"/> <circle cx="300" cy="100" r="80" fill="url(#a11124_r2)"/> </svg> </div>