Translate

2020年11月14日 星期六

戲說線段

線段有很多屬性，無意間看到有人利用這些屬性做動畫相當有意思，決定先來整理線段的屬性

stroke-linecap

圖1：
polyline
圖2：(預設)
stroke-linecap="butt"
圖3：
stroke-linecap="round"
圖4：
stroke-linecap="square"

stroke-linejoin

圖1：(預設)
stroke-linejoin="miter"
圖2：
stroke-linejoin="round"
圖3：
stroke-linejoin="bevel"
圖4：(可能無作用)
stroke-linejoin="miter-clip"
圖5：(可能無作用)
stroke-linejoin="arcs"

stroke-dasharray

這是一個陣列型態，奇數為要顯示的點數，偶數為不顯示的點數
[10,20] 等於 [10,20,10,20,....] 換言之如果陣列是基數 [10,20,30] 等於 [10,20,30,10,20,30,....]

圖1：
stroke-dasharray="10"
圖2：
stroke-dasharray="10,20"
圖3：
stroke-dasharray="10,20,30"

stroke-dashoffset

虛線起始的點數

圖1：
stroke-dashoffset="0"
圖2：
stroke-dashoffset="10"
圖3：
stroke-linecap="round"

利用 stroke-dashoffset 來產生動畫


<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"></circle>

</svg>

搭配 path 可以做出相當有意思的動畫 


<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"></path>
</defs>

<use xlink:href="#a11143_def" stroke="#fa0" fill="#0000" stroke-width="2" stroke-linecap="round"></use>

<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"></use>

</svg>

也可以用在滑鼠移動時的動態效果


<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>
<path id="a11144_line2" d="M60,50 l-40,0 c0,-30,40,-30,40,-25 l-40,40"></path>

</svg>
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)