SVG でクールな動的アイコンを作成する方法 (コード例)

この章では、SVG を使用して HTML5 でクールな動的アイコンを作成する方法を紹介します。必要な方は参考にしていただければ幸いです。 SVGは、いくつかの事前定義された形状要素を持っています：rect＆gt;、circle＆lt; circle＆gt;、lt; lt; lt; 、パス、テキスト。

<!-- viewBox定义画布大小 width/height定义实际大小 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300">

    <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 -->
    <line x1="0" y1="0" x2="250" y2="30" />

    <!-- 多边形 通过多个点的坐标形成封闭图形 -->
    <polygon points="5,5 100,100 50,200" />

    <!-- 矩形 (x,y)为左上角起始点 -->
    <rect x="100" y="100" width="120" height="100" />

    <!-- 圆形 (cx,cy)圆心点 r半径 -->
    <circle cx="100" cy="50" r="40" stroke="black"/>

    <!-- 文本 (x,y)左下角坐标  -->
    <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>

</svg>

2. スタイルと効果

svg要素のスタイルはタグの属性として記述することも、スタイル内に記述することもできます。以下に主なスタイル属性をいくつか示します:

ストローク: ストロークの色 ストローク幅: ストローク幅 ストローク-不透明度: ストロークの透明度 fill: 塗りつぶしの色、つまり背景 fill-opacity: 塗りつぶし色の透明度

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

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

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


3. 補助要素

svg には、 という補助要素があります。これらは特定の形状を表すものではありませんが、グラフィック要素のグループ管理、再利用などに役立ちます。詳しい紹介はこちらからご覧いただけます。

要素は通常、回転、拡大縮小、関連スタイルの追加などの統合操作のために関連するグラフィック要素をグループ化するために使用されます。

既存の SVG グラフィックの再利用を実現します。単一の SVG グラフィック要素または で定義されたグループ要素を再利用できます。

内部で定義された要素は直接表示されません。事前にスタイルを定義する必要はありませんが、 を使用してインスタンス化するときに定義します。 は、 のグループ化機能と の初期非表示機能を備えた独自のウィンドウを作成できます。 上記の変換基点の問題では、 タグをネストし、 の位置をオフセットすることで基点をリセットできます。以下のように水平方向に複数の円を描画し、異なるズームサイズを設定します

<svg 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)" />
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" />
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
    </g>
</svg>

IV. アニメーションの実装

svg のアニメーション効果は、アニメーションタグ要素に基づいています:

の実装属性の;

変形アニメーション効果を実現します;

パス アニメーション効果を実現します。 SVG は非常に柔軟な記述が可能で、スタイルはタグ属性として記述したり、アニメーション タグを xlink を通じて指定したり、アニメーション要素内に記述したりできます。以下は、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: 値に対応する、次の時点各ポイント

calcMode: アニメーション速度モード。離散 | 線形スプライン

keySplines: calcMode が spline

5 の場合に有効なモーション ベジェ制御点を設定します。コード例

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>

レンダリング:

また、js を使用して svg のプロパティを制御し、svg のアニメーション プロセスを制御し、次のようなアイコンを作成することもできます。ボタンのクリックやその他のイベントに応答します。

以上がSVG でクールな動的アイコンを作成する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。