
もっと早く知りたかった!SVGを扱うなら知っておきたいタグ&プロパティまとめ
SVGを扱うなら知っておきたいこと:CSSプロパティ編
SVGを扱うためのCSSプロパティも多数存在していますが、主に塗りを扱う「fill」と線を扱う「stroke」の2つのグループが存在しています。
また、それぞれのプロパティを「animation」で指定することでSVGをアニメーションとして動かすことができるようになります。
1. fill (塗り)
fillは、要素の中の塗りの色を指定することができるプロパティです。
もちろん、塗りは単色だけでなく、グラデーションを指定することもできます。
fill: #0060e6;
2. fill-opacity (塗りの透明度)
fill-opacityは、fillで塗られた箇所の透明度を変えることができるプロパティです。
fill-opacity: 0.6;
ちなみにopacityでも透明度を変えることができますが、opacityはSVG全体の透明度を調整するので、線も含めて透過してしまいます。
3. stroke (線)
strokeは、要素のアウトラインの色を指定できるプロパティです。
stroke: #0060e6;
borderなどの他のアウトライン関連のプロパティと違い、幅や大きさなどをショートハンドで記述することはできません。
4. stroke-opacity (線の透明度)
stroke-opacityは、要素のアウトラインの透明度を指定できるプロパティです。
stroke-opacity: 0.4;
5. stroke-width (線の太さ)
stroke-widthは、外形線の幅を指定できるプロパティです。
0かnoneを指定すると、アウトラインを消すことができます。
stroke-width: 3;
6. stroke-linecap (線の先端の形)
stroke-linecapは、パスの先端の形を指定するプロパティです。
「butt」で線に等しく平らかな形になり、「square」で線の端が四角くなり、「round」で線の端が丸くなります。
stroke-linecap: square;
7. stroke-linejoin (線のつなぎ目の形)
stroke-linejoinは、パスのつなぎ目の形を指定するプロパティです。
「miter」はそのままつなぎ合わせ、「bevel」はつなぎ目が平らになり、「round」はつなぎ目が丸くなります。
stroke-linejoin: bevel;
8. stroke-dasharray (破線の間隔)
stroke-dasharrayは、破線の間隔を指定するプロパティです。
指定した間隔に応じて、等間隔で破線を表示します。
stroke-dasharray: 3px;
9. stroke-dashoffset (破線の開始位置)
stroke-dashoffsetは、破線の開始位置を指定するプロパティです。
stroke-dashoffset: 10px;
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析・広告効果測定
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
