戲說線段

線段有很多屬性，無意間看到有人利用這些屬性做動畫相當有意思，決定先來整理線段的屬性 # stroke-linecap <div style="display:inline-block"> 圖1：<br>polyline<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline id="a11141_line1" points="30,50 100,30 170,70 30,70" stroke="#000" fill="#0000" /> </svg> </div> <div style="display:inline-block"> 圖2：(預設)<br>stroke-linecap="butt"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="butt"/> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖3：<br>stroke-linecap="round"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="round" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖4：<br>stroke-linecap="square"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linecap="square" /> <use xlink:href="#a11141_line1"/> </svg> </div> # stroke-linejoin <div style="display:inline-block"> 圖1：(預設)<br>stroke-linejoin="miter"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="miter" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖2：<br>stroke-linejoin="round"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="round" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖3：<br>stroke-linejoin="bevel"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="bevel" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖4：(可能無作用)<br>stroke-linejoin="miter-clip"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="miter-clip" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖5：(可能無作用)<br>stroke-linejoin="arcs"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=15 stroke-linejoin="arcs" /> <use xlink:href="#a11141_line1"/> </svg> </div> # stroke-dasharray 這是一個陣列型態，奇數為要顯示的點數，偶數為不顯示的點數<br> [10,20] 等於 [10,20,10,20,....] 換言之如果陣列是基數 [10,20,30] 等於 [10,20,30,10,20,30,....] <div style="display:inline-block"> 圖1：<br>stroke-dasharray="10"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖2：<br>stroke-dasharray="10,20"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10,20" /> <use xlink:href="#a11141_line1"/> </svg> </div> <div style="display:inline-block"> 圖3：<br>stroke-dasharray="10,20,30"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="10,20,30" /> <use xlink:href="#a11141_line1"/> </svg> </div> # stroke-dashoffset 虛線起始的點數 <div style="display:inline-block"> 圖1：<br>stroke-dashoffset="0"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="0"/> <use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="0"/> </svg> </div> <div style="display:inline-block"> 圖2：<br>stroke-dashoffset="10"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="10"/> <use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="10"/> </svg> </div> <div style="display:inline-block"> 圖3：<br>stroke-linecap="round"<br> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <polyline points="30,50 100,30 170,70 30,70" stroke="#fa0" fill="#0000" stroke-width=10 stroke-dasharray="20" stroke-dashoffset="0" stroke-linecap="round"/> <use xlink:href="#a11141_line1" stroke-dasharray="20" stroke-dashoffset="0"/> </svg> </div> <hr> 利用 stroke-dashoffset 來產生動畫 ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> @keyframes a11142_k1 { 100% { stroke-dashoffset:502.655; } } #a11142_circle { animation:a11142_k1 3s infinite linear } </style> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="200"> <circle id="a11142_circle" cx=100 cy=100 r=80 stroke="#fa0" fill="#0000" stroke-width=20 stroke-dasharray="20 80.53" stroke-dashoffset="0" stroke-linecap="round"/> </svg> </div> 搭配 path 可以做出相當有意思的動畫 ``` $mmcode(r3) ``` <div class="mmresult r3"> <style> @keyframes a11143_k1 { 100% { stroke-dashoffset:464; } } #a11143_path { animation:a11143_k1 3s infinite linear } </style> <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa" width="200" height="100"> <defs> <path id="a11143_def" d="M10,50 C20,10,90,10,100,50 C120,90,180,90,190,50 C180,10,120,10,100,50 C90,90,20,90,10,50Z" /> </defs> <use xlink:href="#a11143_def" stroke="#fa0" stroke="#fa0" fill="#0000" stroke-width=2 stroke-linecap="round"/> <use xlink:href="#a11143_def" id="a11143_path" stroke="#f00" fill="#0000" stroke-width=10 stroke-dasharray="15,449" stroke-dashoffset="0" stroke-linecap="square"/> </svg> </div> 也可以用在滑鼠移動時的動態效果 ``` $mmcode(r4) ``` <div class="mmresult r4"> <style> #a11144_svg:hover #a11144_line1 { stroke-dashoffset:-125; transition:0.4s ease-in-out; } #a11144_svg:hover #a11144_line2 { stroke-dashoffset:-103; transition:0.4s ease-in-out; } #a11144_line1 { stroke-width:2; fill:none; stroke:#f00; stroke-dasharray:40 135; stroke-dashoffset:0; transition:1s ease-in-out; } #a11144_line2 { stroke-width:2; fill:none; stroke:#00f; stroke-dasharray:40 115; stroke-dashoffset:0; transition:1s ease-in-out; } </style> <svg id="a11144_svg" viewbox="10 15 60 60" xmlns="http://www.w3.org/2000/svg" width="120" height="120"> <path id="a11144_line1" d="M20,40 l40,0 c0,30,-40,30,-40,-15 l40,40" /> <path id="a11144_line2" d="M60,50 l-40,0 c0,-30,40,-30,40,-25 l-40,40" /> </svg> </div>