使用並重用SVG中的所有內容……甚至動畫！

如果您熟悉SVG和CSS動畫並開始與它們合作，那麼這裡可能需要牢記一些想法，然後才能從事工作。本文將涉及如何使用元素，CSS變量和CSS動畫來構建和優化代碼。

第1部分：SVG 元素

如果您是一個喜歡保持代碼乾燥或SASS/CSS變量的忠實粉絲的開發人員，那麼您很有可能會喜歡此標籤。

假設您的圖形中有多次重複的元素。您可以在SVG中重複多次代碼的複雜部分，而可以一次定義此部分，然後用元素在文檔中的其他位置克隆它。這不僅會減少大量代碼，而且還可以使您的標記更簡單，更易於操縱。

要開始實現元素，請轉到您的SVG並按照以下步驟：

1. 確定要克隆的代碼的部分
2. 在該部分添加ID
3. 將其鏈接在您的標籤中：

就是這樣！您的新克隆已經準備好了，現在您可以更改其屬性（例如X和Y位置）以滿足您的需求。

讓我們進入一個非常方便的例子

我想分享這個真實的情況，我需要為一個由小立方體單元製成的大立方體動畫。 （想像一下經典的Rubik的立方體。）

我們將使用基本形狀和變換在SVG中繪製Cube單元開始：

 <svg viewbox="“">
  <g>
    <rect width="“" height="“" transform="“" skewy></rect>
    <rect width="“" transform="“" skewy></rect>
    <rect width="“" height="“" transform="“比例（1.41，.81）旋轉（45）轉換（0"></rect>
  </g>
</svg>

請注意，形狀分組為A 元素，因此我們可以將ID添加到整個圖中。

接下來，讓我們構建一個更大的立方體克隆本機。首先，我們需要從SVG內部的標籤內部的上一個示例中包裹立方體。在元素中，我們可以將任何要重複使用的內容放置，這可能是單個形狀，一個組，一個漸變。 .幾乎所有SVG元素。除非我們在此標籤之外使用它們，否則它們不會在任何地方渲染。

然後，我們可以根據需要使用其ID鏈接多次單元，並在這樣的每個克隆上更改X和Y位置：

現在，我們必須將每個立方體都放置，以記住最後一個元素將出現在正面，此後我們將準備第一個大立方體！

Xlink：自SVG2以來，HREF被棄用，但最好將其用於兼容目的。在現代瀏覽器中，您可以只使用HREF，但我在Safari上對其進行了測試，並且在撰寫本文時不正常。如果使用Xlink：HREF確保在SVG標籤中包含此名稱空間：XMLNS：XLINK =“ http://www.w3.org/19999/xlink”（如果您決定使用HREF，則不需要它）。

第2部分：使用CSS變量將不同的樣式應用於您的重複使用圖形

我為立方體選擇了一種主要顏色，該顏色是側面的較輕和較暗的陰影，並帶有筆觸顏色。但是，如果我們想讓第二個立方體變成不同的顏色怎麼辦？

我們可以用CSS變量替換填充和筆觸，以使這些屬性更加靈活。這樣，我們將能夠使用另一個調色板重複使用同一立方體（而不是定義第二個具有不同顏色的單元以進行第二個立方體）。

為什麼不在新的立方體中添加一類，然後用CSS更改填充顏色？我們將做到這一點，但首先，嘗試檢查元素。您會注意到它在陰影dom中渲染。這意味著它不容易受到腳本和样式的影響，例如普通DOM中的元素。您在圖內定義的任何值中的所有實例都將繼承，並且您將無法用CSS重寫。但是，如果您用變量替換這些值，則可以在CSS中控制它們。

在我們的立方體單元中，我們將遍歷每一方面，並​​用語義變量名稱替換填充和中風值。

例如，這個：

 <rect fill="“＃00AFFA”" stroke="“＃0079AD”"></rect>

…可以用以下來代替：

 <rect fill="“" var maincolor stroke="“"></rect>

從這裡開始，我們必須複製SVG以構建第二個立方體。但是，如果我們將兩者都保留在同一文檔中，則不需要復制。我們可以向每個SVG添加一個類，並通過CSS控制調色板，從而重新定義變量的值。

讓我們為藍色立方體創建一個調色板，另一個用於粉紅色立方體：

 .Blue-Cube {
  -MainColor：＃009CDE;
  -trokeColor：＃0079AD;
   - 光彩：＃00AFFA;
   -  -DarkColor：＃008BC7;
}

.pink-cube {
  -MainColor：＃de0063;
  -trokeColor：＃ad004e;
   - 光彩：＃fa0070;
   -  -DarkColor：＃C7005A;
}

這樣，我們可以添加任意數量的立方體，並從一個地方更改所有顏色。

第3部分：重複使用動畫

這種情況的想法是打破懸停的立方體 - 類似爆炸的視圖，以便當我們將光標放在立方體上時，有些碎片會從中心移開。

讓我們從定義兩個動作，一個針對每個軸的動作：移動y並移動X。通過將動畫分配在動作中，我們將能夠在每個立方體中重複使用它們。動畫將包括將立方體從其初始位置移動到30px或50px朝一個方向移動。我們可以使用轉換轉換（x或y）來實現這一目標。例如：

 @keyframes movex {
  to {transform：translatex（-35px）; }
}

但是，如果我們想能夠重複使用此動畫，最好用一個變量替換數字值，例如：

 @keyframes movex {
  to {transform：translatex（var（ -  translate，35px））; }
}

如果未定義變量，則默認值將為35px。

現在，我們至少需要一個課程才能綁定到動畫。但是，在這種情況下，我們需要兩個類來移動X軸的立方體：.m-left和.m-Right。

 .m-left，.m-right { 
  動畫：2s Movex備用無限； 
}

為了使立方體向左移動，我們需要一個負值，但我們也可以聲明不同的數字。我們可以在.m-左類中定義這樣的變量：

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

這裡發生的事情是，我們聲明，當我們將類別.m左添加到一個元素時，這將播放Animation MoveX（在@KeyFrames中定義的一個），它將持續兩秒鐘以在X軸上翻譯並達到剩下-50px的新位置。然後，動畫交替使用方向，使其從最後一個位置移動，然後再花兩秒鐘才能轉到其原始狀態。等等，因為它是一個無限的循環。

我們可以向.m-Right類聲明另一個變量，但是如果我們不這樣做，請記住，它將以我們在開始時聲明的35px。

默認的動畫播放狀態值正在運行，但也許我們不希望立方體一直移動。在附近內容的網站上使用將非常分心和煩人。因此，讓我們嘗試通過添加以下方式播放動畫：

 SVG：懸停.m-left {
  動畫：2s Movex備用無限；
}

您可以自己嘗試一下，並發現每次我們將光標從立方體排出時，動畫都超速跳到初始狀態。為了避免，我們可以在動畫速記結束時添加暫停的價值：

 .m-left {
  動畫：2s Movex備用無限暫停；
}

現在，動畫被暫停了，但將通過添加此CSS線來懸停在懸停時：

 SVG：懸停 * { 
  動畫播放狀態：跑步； 
}

我們可以將每個類應用於SVG中的不同元素。在第一個藍色立方體中，我們正在移動單立方體。在第二個中，我們將這些課程應用於立方體組。

最後一件事…

直到後來，我才意識到我可以重複使用一個單元來構建它們。我在小立方體上工作以使其平均水平足夠，因此它可以輕鬆與旁邊的其他其他立方體保持一致。在這一點上，我的設備是一個，但我決定用SVG形狀替換它以減少代碼並獲得更清潔的標記。

我了解到，最好花一些時間在繪製每個形狀並處理大量代碼之前分析SVG可以做什麼。一開始可能需要更多的時間，但是從長遠來看，您會節省大量時間和精力。

以上是使用並重用SVG中的所有內容……甚至動畫！的詳細內容。更多資訊請關注PHP中文網其他相關文章！