ホームページ > 記事 > ウェブフロントエンド > SVG 動的アイコンの実装方法
SVG 動的アイコンの実装方法
- 不言オリジナル
- 2018-07-18 17:59:088405ブラウズ
この記事では、SVG 動的アイコンを実装する方法を説明します。必要な場合は参考にしてください。
Loading.io では、たくさんの素晴らしい読み込みアイコンを見ることができます。これらはすべて svg で書かれており、わずか数行のコードで、img イメージよりも洗練されており、純粋な dom 実装よりも柔軟で効率的です。アイコンがクリック イベントに応答するようにすることもできます。
この円や四角はどうやって描くのでしょう？色を塗るにはどうすればいいですか？移動方法は？ まず svg の基本を見てから、上の最初のアイコンを描画しましょう。
1. 基本的なグラフィック要素
SVG にはいくつかの事前定義された形状要素があります: 長方形 4f5c91326734be5b874f0369b6cec59d、円 30de22e41cb8eb8fbfdc1f091d85e4be、楕円 d9b42b40d0fdc429c7c48871eea4816c、直線 15a73cc5312745b1b00671f6e690e36a、ポリライン ce803ba1a4290bddb3ba9c6f57d4c9b4、多角形 4adc75842a2e7817b15d49a8398c9f80、パス98953a78f52873edae60a617ec082494、テキスト28f128881ce1cdc57a572953e91f7d0f。
1 <!-- viewBox定义画布大小 width/height定义实际大小 --> 2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300"> 3 4 <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 --> 5 <line x1="0" y1="0" x2="250" y2="30" /> 6 7 <!-- 多边形 通过多个点的坐标形成封闭图形 --> 8 <polygon points="5,5 100,100 50,200" /> 9 10 <!-- 矩形 (x,y)为左上角起始点 --> 11 <rect x="100" y="100" width="120" height="100" /> 12 13 <!-- 圆形 (cx,cy)圆心点 r半径 --> 14 <circle cx="100" cy="50" r="40" stroke="black"/> 15 16 <!-- 文本 (x,y)左下角坐标 --> 17 <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>18 19 </svg>
- 2. スタイルと効果
svg要素のスタイルはタグの属性として記述することもできますし、スタイルの中に記述することもできます。主なスタイル属性は次のとおりです:
ストローク: ストロークの色
ストローク幅: ストロークの幅
ストローク-不透明度: ストロークの透明度
fill: 塗りつぶしの色、背景
-
埋める-opacity: 塗りつぶし色の透明度
transform: css3 変換に似たグラフィック変換
SVG は多くのフィルター効果もサポートしており、グラデーション、シャドウ、ぼかし、画像の混合などを行うことができます。たとえば、色付きの円をいくつか描きたい場合は、circle と fill を使用するだけです。
注: 変換のデフォルトは、円の中心やその他の中心ではなく、svg の左上隅を基点とします。左上隅は svg 座標系の原点です。変換および座標系について詳しくは、ここを参照してください。
- 3. 補助要素
SVG にはいくつかの補助要素があります: 9f9d05a576cea0d265e9d798da82bdec 2199a63ce40299beb55b2a8b469dfcd6これらは特定の形状を表すものではありませんが、グラフィック要素のグループ管理、再利用などに役立ちます。詳しい紹介はこちらからご覧いただけます。
3e85b886453624fdb0fdf16e0b451ee0 要素は通常、回転、拡大縮小、関連スタイルの追加などの統合操作のために関連するグラフィック要素をグループ化するために使用されます。
2199a63ce40299beb55b2a8b469dfcd6 既存の SVG グラフィックの再利用を実現します。単一の SVG グラフィック要素を再利用したり、3e85b886453624fdb0fdf16e0b451ee09f9d05a576cea0d265e9d798da82bdec で定義されたグループ要素を再利用したりできます。
9f9d05a576cea0d265e9d798da82bdec 内部的に定義された要素は直接表示されません。事前にスタイルを定義する必要はありませんが、2199a63ce40299beb55b2a8b469dfcd6 を使用してインスタンス化するときに定義します。
5aaf33f5e4c7c54d016a539db37ebcc8 は、3e85b886453624fdb0fdf16e0b451ee0 のグループ化機能と 9f9d05a576cea0d265e9d798da82bdec の初期非表示機能の両方を備えた独自のウィンドウを作成できます。 
1 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 2 <g transform="translate(20 50)"> 3 <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" /> 4 </g> 5 <g transform="translate(40 50)"> 6 <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" /> 7 </g> 8 <g transform="translate(60 50)"> 9 <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" /> 10 </g> 11 <g transform="translate(80 50)"> 12 <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" /> 13 </g> 14 </svg>
を取得します。 IV. アニメーションの実装
svg のアニメーション効果は、アニメーション タグ要素に基づいています:
実装 単一属性トランジションエフェクト、
b32227fb1e5c965892584259ad65af80 はトランスフォーム変形アニメーションエフェクトを実現し、
1c3f862fe048da235fb9de11bfd05e0d はパスアニメーションエフェクトを実現します。
SVGの書き方は非常に柔軟で、アニメーションタグはタグ属性として記述したり、アニメーション要素内に記述したりすることができます。以下は、animateTransform の xlink 記述メソッドを示しています。
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect>
<animateTransform
xlink:href="#animateObject" <!-- 指定动画元素 -->
attributeName="transform" <!-- 需要动画的属性名称 -->
type="scale" <!-- 指定transform属性 -->
begin="0s" <!-- 开始时间，即延迟 -->
dur="3s" <!-- 动画时间 -->
from="1" <!-- 开始值 -->
to="2" <!-- 结束值 -->
repeatCount="indefinite" <!-- 重复方式，indefinite无限重复 -->
/>
</svg>-
上の例のアニメーションは、A から B への遷移です。スムーズなサイクルを形成するには、少なくとも 3 つのキー ポイントを定義する必要があります。 animateTransform は、ますます柔軟な属性設定をサポートします:
🎜🎜🎜values: 複数のキーポイントの値、from と to を置き換えます (values="0;1;0" など) 🎜 keyTimes：跟values对应，各个点的时间点
calcMode：动画快慢方式。
discrete|linear|paced|splinekeySplines：设置运动的贝塞尔控制点，calcMode为spline时有效
对svg动画的更详细介绍，参考 这里 。
五、代码实例
circle画圆，fill着色，用g标签包裹并定位，transform设置初始形变，animateTransform设置动画。现在来看代码，相信不会再是一头雾水了：
<svg class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(20 50)">
<circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)">
<animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
<g transform="translate(40 50)">
<circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)">
<animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
<g transform="translate(60 50)">
<circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)">
<animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
<g transform="translate(80 50)">
<circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)">
<animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
</svg>
相关推荐：
以上がSVG 動的アイコンの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。