どうもですよ、はやちですよ( ˇωˇ)☝
今回は、SVGのプロパティを理解して実際に動かしてみようと思います( ˇωˇ)☝
SVGのプロパティについて
以下SVGのプロパティについてご紹介いたします。
fill
fillは、要素の内部の塗りを指定できるプロパティです。
fill:#fb9e28;fill-opacity
fill-opacityは、fillで塗られた箇所の透明度を変えることができるプロパティです。
fill-opacity:0.3;stroke
strokeは、線、テキスト、要素のアウトラインの色を指定できるプロパティです。
stroke:#000;stroke-width
stroke-widthは、外形線の幅を指定できるプロパティです。
px,em,ec,pt,pc,cm,mm,inでの単位で指定することができます。0を指定すると、ストロークの線が消えてしまうので注意です( ˇωˇ)☝
stroke-width:5px;stroke-opacity
stroke-opacityは、strokeで塗られた箇所の透明度を変えることができるプロパティです。
stroke-opacity:0.3;stroke-linecap
stroke-linecapは、パスの端に形状を指定するプロパティです。
stroke-linecap:butt;
stroke-linecap:round;
stroke-linecap:square;- butt
線に等しく平らな形状 - round
線の端を丸くする - square
線の端を四角くする
stroke-linejoin
stroke-linejoinは、パスのつなぎ目の形状を指定するプロパティです。
stroke-linejoin: miter;
stroke-linejoin: round;
stroke-linejoin: bevel;- miter
つなぎ目が鋭利な形状 - round
つなぎ目が丸い形状 - bevel
つなぎ目が平らな形状
stroke-dasharray
stroke-dasharrayは、線の間隔を指定するプロパティです。
1pxなら、1pxの線のあとに1pxの隙間、というように等間隔で表示されます。
stroke-dasharray: 1;
stroke-dasharray: 3;
stroke-dasharray: 10;stroke-dashoffset
stroke-dashoffsetは、線の始まりの位置を指定するプロパティです。
デモではstroke-dasharrayの指定を170pxにすることで要素分の線が指定されるので、stroke-dasharrayを同じ数値分指定してあげることによって、位置が移動されて線の長さが変わったように見えます。
stroke-dasharray: 170;
stroke-dasharray: 100;
stroke-dasharray: 50;stroke-dasharrayとstroke-dashoffsetの動きに関してはこちらでも説明されておりますのでご参考までに( ˘ω˘)☞三☞ｼｭｯｼｭｯ
Animated line drawing in SVG
アニメーションさせてみよう
※アニメーションの確認の際はRERUNを押してください
SVGのプロパティを使って、できたアニメーションさせてみました( ˘ω˘)☞三☞ｼｭｯｼｭｯ
丸の部分と顔の部分とで分けてつくります。
まず、stroke-dasharrayは線が全て埋まるまでの数値まで指定をします。
circle{
fill:none;
stroke:#000;
stroke-width:4px;
stroke-dasharray: 287;
}
path{
fill:#000;
fill-opacity:1;
stroke:#000;
stroke-width:1px;
stroke-dasharray: 66;
}アニメーションはanimationで指定します( ˇωˇ)☝
丸の部分はstroke-dashoffsetのみで顔の部分はfill-opacityも一緒に指定してます( ˇωˇ)☝
circle{
animation: circle ease 3s;
}
path{
animation: path ease 3s;
}
@keyframes circle {
to {
stroke-dashoffset: 0;
}
from {
stroke-dashoffset: 287;
}
}
@keyframes path {
to {
stroke-dashoffset: 0;
fill-opacity:1;
}
from {
stroke-dashoffset: 66;
fill-opacity:0;
}
}まとめ
プロパティを理解することによって、動きに関する理解も深まったかと思います( ˇωˇ )
ではでは₍₍ (ง ˘ω˘ )ว ⁾⁾
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
