使用并重用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中文网其他相关文章！