SVGのすべてを使用して再利用します...アニメーションでさえ！

SVGおよびCSSアニメーションに精通していて、頻繁にそれらと作業し始めた場合は、仕事に飛び込む前に心に留めておくべきアイデアをいくつか紹介します。この記事では、要素、CSS変数、​​CSSアニメーションを使用して、コードを構築および最適化する方法を学ぶことについて説明します。

パート1：SVG 要素

あなたがあなたのコードを乾燥させ続けることやSASS/CSS変数の大ファンを好む開発者であるなら、あなたがこのタグを気に入る可能性は十分にあります。

グラフィックで何度も繰り返される要素があるとしましょう。コードの複雑な部分をSVGで何度も繰り返す代わりに、この部分を一度定義してから、ドキュメント内のどこかで要素でクローンすることができます。これにより、膨大な量のコードを削減するだけでなく、マークアップがよりシンプルで操作しやすくなります。

要素の実装を開始するには、SVGに移動してこの手順に従ってください。

1. クローンするコードの部分を特定する
2. その部分にIDを追加します
3. 次のようにタグ内にリンクします：

それでおしまい！新しいクローンの準備が整いました。これで、ニーズに合わせて属性（xおよびy位置など）を変更できます。

非常に便利な例に飛び込みましょう

小さなキューブユニットで作られた大きなキューブをアニメーション化する必要があるこの本当のケースを共有したいと思います。 （古典的なルービックキューブを想像してください。）

基本的な形状と変換を使用して、SVGでキューブユニットを描画することから始めます。

 <svg viewbox="-130 -20 300 100">
  <g>
    <rect width="21" height="24" transform="skewy（30）"></rect>
    <rect width="21" height="24" transform="skewy（-30）translate（21 24.3）"></rect>
    <rect width="21" height="21" transform="スケール（1.41、.81）回転（45）翻訳（0 -21）"></rect>
  </g>
</svg>

形状は要素にグループ化されているため、図全体にIDを追加できることに注意してください。

次に、このユニットをクローニングするより大きなキューブを構築しましょう。まず、SVG内のタグ内の前の例からキューブをラップする必要があります。 要素では、再利用したいものをすべて置くことができます。これは、単一の形状、グループ、勾配です。ほぼすべてのSVG要素です。私たちがこのタグの外でそれらを使用しない限り、彼らはどこにもレンダリングしません。

次に、ユニットをそのIDを使用して何度もリンクし、このようなすべてのクローンのxとyの位置を変更できます。

 <xlink x="142" y="124"></xlink>
<xlink x="100" y="124"></xlink>

次に、最後の要素が前面に表示されることを覚えて、すべてのキューブを配置する必要があります。その後、最初の大きなキューブの準備ができています！

Xlink：HREFはSVG2以降に非推奨ですが、互換性のために使用する方が良いです。最新のブラウザでは、HREFを使用することができますが、Safariでテストしましたが、執筆時点ではそこでは機能していません。 xlink：hrefを使用する場合は、この名前空間をSVGタグに含めることを確認してください：xmlns：xlink = "http://www.w3.org/1999/xlink"（HREFを使用する場合は必要ありません）。

パート2：CSS変数を使用して、グラフィックの再利用にさまざまなスタイルを適用します

私はキューブのメイン色を選びました。これは、側面の明るい色合いで暗い色合いで、ストローク色です。しかし、2番目のキューブを別の色にしたい場合はどうなりますか？

フィルとストロークをCSS変数に置き換えて、これらの属性をより柔軟にすることができます。そうすれば、同じキューブユニットを別のパレットで再利用することができます（2番目のキューブで異なる色の2番目のユニットを定義する代わりに）。

新しいキューブにクラスを追加して、CSSで塗りつぶしの色を変更してみませんか？それを行いますが、最初に、要素を検査してみてください。 Shadow Domでレンダリングすることに気付くでしょう。つまり、通常のDOMの要素のように、スクリプトやスタイルに対して脆弱ではありません。 内部の図で定義する値はすべて、そのすべてのインスタンスによって継承され、CSSを使用してそれらを書き換えることはできません。ただし、これらの値を変数に置き換えると、CSSでそれらを制御できます。

キューブユニットでは、両側を通過し、塗りつぶしの値とストローク値をセマンティック変数名に置き換えます。

たとえば、これ：

 <rect fill="＃00affa" stroke="＃0079ad"></rect>

…これに置き換えることができます：

 <rect fill="var（ -  maincolor）" stroke="var（ -  strokecolor）"></rect>

ここから、SVGを複製して2番目のキューブを構築する必要があります。ただし、同じドキュメントに両方を保持している場合、を複製する必要はありません。各SVGにクラスを追加し、CSSを介してカラーパレットを制御して、変数の値を再定義できます。

ブルーキューブ用のパレットとピンクキューブ用のパレットを作成しましょう。

 .blue-cube {
   -  MainColor：＃009CDE;
  -StrokeColor：＃0079AD;
  -lightcolor：＃00affa;
  -darkcolor：＃008bc7;
}

.pink-cube {
   -  maincolor：＃de0063;
  -StrokeColor：＃AD004E;
  -lightcolor：＃fa0070;
  -darkcolor：＃c7005a;
}

これにより、必要な数のキューブを追加して、1つの場所からすべての色を変更できます。

パート3：アニメーションの再利用

このインスタンスのアイデアは、ホバーのキューブを壊すことです。爆発したビューのようなもので、キューブの上にカーソルを置くと、いくつかのピースが中央から離れることです。

まず、各軸に1つの動きを定義することから始めましょう。1つはyを移動し、xを移動します。動きでアニメーションを分割することで、すべてのキューブでそれらを再利用することができます。アニメーションは、キューブを最初の位置から30pxまたは50px離れて一方向に移動することで構成されます。変換翻訳（xまたはy）を使用してそれを実現できます。例えば：

 @KeyFramesMovex {
  {transform：translatex（-35px）; }
}

しかし、このアニメーションを再利用できるようにしたい場合は、このような数値を変数に置き換えることをお勧めします。

 @KeyFramesMovex {
  {transform：translatex（var（ -  translate、35px））; }
}

変数が定義されていない場合、デフォルト値は35pxになります。

これで、アニメーションにバインドするには、少なくとも1つのクラスが必要です。ただし、この場合、X軸にキューブを移動するには2つのクラスが必要です：.m-leftと.m-right。

 .m-left、.m-right { 
  アニメーション：2S Movex Alternate Infinite; 
}

キューブが左に移動するには、負の値が必要ですが、別の数を宣言することもできます。 .m-leftクラス内でこのような変数を定義できます。

 .m -left { -  translate：-50px; }

ここで起こっているのは、クラス.m-leftを1つの要素に追加すると、X軸で翻訳して残り-50pxの新しい位置に到達するために2秒続くアニメーションMovex（@keyframesで定義されたもの）を再生することを宣言しています。次に、アニメーションは方向を交互にして、最後の位置から移動し、元の状態に行くのにさらに2秒かかります。それは無限のループだからです。

.m-rightクラスに別の変数を宣言できますが、そうでない場合は、最初に宣言した35pxが必要であることを覚えておいてください。

デフォルトのAnimation-Play-State値は実行されていますが、キューブが常に移動したくないかもしれません。近くのコンテンツを備えたサイトで使用するのは非常に気を散らし、迷惑です。それでは、これを追加して、ホバーでのみアニメーションを再生してみましょう。

 SVG：HOVER .M-LEFT {
  アニメーション：2S Movex Alternate Infinite;
}

自分で試してみることができ、カーソルをキューブから配置するたびに、アニメーションが初期状態に非常に高速にジャンプしていることがわかります。それを避けるために、アニメーションの速記の最後に一時停止した値を追加できます。

 .m-left {
  アニメーション：2S Movex代替Infiniteが一時停止します。
}

これでアニメーションは一時停止されますが、このCSSのラインを追加することでホバーで実行されます。

 SVG：Hover * { 
  Animation-Play-State：実行中; 
}

各クラスをSVGの異なる要素に適用できます。最初の青いキューブでは、単一の立方体を動かしています。 2番目では、これらのクラスをキューブのグループに適用しています。

最後に…

1つのユニットを再利用してそれらすべてを構築できることに気付いたのは、後でそうではありませんでした。私は小さなキューブに取り組み、それを十分に等等にして、隣の他のものと簡単に整列させることができました。この時点で、私のユニットはでしたが、コードを削減してクリーンなマークアップを取得するために、SVG形状に置き換えることにしました。

すべての形状を描き、膨大な量のコードを扱う前に、SVGで何ができるかを分析するのに時間がかかる方が良いことを学びました。最初はもっと時間がかかるかもしれませんが、長期的には多くの時間と労力を節約できます。

以上がSVGのすべてを使用して再利用します...アニメーションでさえ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。