SVG 動的アイコンの実装方法-htmlチュートリアル-php.cn

SVG 動的アイコンの実装方法

不言

リリース： 2018-07-18 17:59:08

オリジナル

8410 人が閲覧しました

この記事では、SVG 動的アイコンを実装する方法を説明します。必要な場合は参考にしてください。

Loading.io では、たくさんの素晴らしい読み込みアイコンを見ることができます。これらはすべて svg で書かれており、わずか数行のコードで、img イメージよりも洗練されており、純粋な dom 実装よりも柔軟で効率的です。アイコンがクリックイベントに応答するようにすることもできます。

この円や四角はどうやって描くのでしょう？色を塗るにはどうすればいいですか？移動方法は？まず svg の基本を見てから、上の最初のアイコンを描画しましょう。

1. 基本的なグラフィック要素

SVG にはいくつかの事前定義された形状要素があります: 長方形、円、楕円、直線、ポリライン、多角形 <ポリゴン>、パス、テキスト。

 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>

ログイン後にコピー

svg要素のスタイルはタグの属性として記述することもできますし、スタイルの中に記述することもできます。主なスタイル属性は次のとおりです:
ストローク: ストロークの色
ストローク幅: ストロークの幅
ストローク-不透明度: ストロークの透明度
fill: 塗りつぶしの色、背景
埋める-opacity: 塗りつぶし色の透明度

transform: css3 変換に似たグラフィック変換

SVG は多くのフィルター効果もサポートしており、グラデーション、シャドウ、ぼかし、画像の混合などを行うことができます。たとえば、色付きの円をいくつか描きたい場合は、circle と fill を使用するだけです。

注: 変換のデフォルトは、円の中心やその他の中心ではなく、svg の左上隅を基点とします。左上隅は svg 座標系の原点です。変換および座標系について詳しくは、ここを参照してください。

SVG にはいくつかの補助要素があります: これらは特定の形状を表すものではありませんが、グラフィック要素のグループ管理、再利用などに役立ちます。詳しい紹介はこちらからご覧いただけます。
要素は通常、回転、拡大縮小、関連スタイルの追加などの統合操作のために関連するグラフィック要素をグループ化するために使用されます。
既存の SVG グラフィックの再利用を実現します。単一の SVG グラフィック要素を再利用したり、で定義されたグループ要素を再利用したりできます。
内部的に定義された要素は直接表示されません。事前にスタイルを定義する必要はありませんが、を使用してインスタンス化するときに定義します。

は、のグループ化機能との初期非表示機能の両方を備えた独自のウィンドウを作成できます。

上記の変換基点の問題では、タグをネストしての位置をオフセットすることで基点をリセットできます。以下のように複数の水平に配置された円を描画し、異なるズームサイズを設定して

 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 のアニメーション効果は、アニメーションタグ要素に基づいています:

実装単一属性トランジションエフェクト、

はトランスフォーム変形アニメーションエフェクトを実現し、

はパスアニメーションエフェクトを実現します。

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 | spline
keySplines：设置运动的贝塞尔控制点，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>

ログイン後にコピー