1. 首页
  2. css

CSS使用和重用SVG中的一切…甚至动画!

如果您熟悉SVG和CSS动画,并开始与他们经常合作,这里有一些想法,你可能要记住,然后再投入工作。本文将学习如何使用<use>元素、CSS变量和CSS动画来构建和优化代码。

Live Demo变量,很有可能您会喜欢此标记。

假设您有一个元素在图形中重复多次。不需要在SVG中多次重复代码的复杂部分,您可以只定义一次该部分,然后使用&lt;use&gt;元素将其克隆到文档中的其他地方。这不仅会减少大量代码,而且会使标记更简单、更易于操作。

要开始实现<use>元素,转到SVG并按照以下步骤操作:

  1. 确定要克隆的代码部分
  2. 将ID添加到该部分
  3. 将其链接到<use>标记中,如下所示:<use>

That\"s it! Your new clone is ready, now you can change its attributes (e.g. xy位置)以满足您的需要。

让我们进入一个非常方便的示例

我想分享这个真实的案例我需要制作一个由小立方体单元组成的大立方体的动画。(想象一下经典的Rubik立方体。)

我们将首先使用基本形状和变换在SVG中绘制立方体单元:

<svg height=>
CodePen Embed Fallback

Note that the shapes are grouped in a <g>元素,这样我们就可以将ID添加到整个图形中。

接下来,让我们构建一个更大的立方体,克隆这个单元。首先,我们需要将上一个示例中的立方体包装到SVG中的<defs>标记中。在<defs>元素中,我们可以放置任何我们想重用的东西,可以是单个形状,一个组,一个渐变。。几乎所有SVG元素。它们不会在任何地方呈现,除非我们在这个标签之外使用它们。

然后我们可以使用它的ID链接该单元,并更改每个克隆上的xy位置,如下所示:

<use>
CodePen Embed Fallback

Now we have to position every cube remembering that the last element will appear at the front, after that we\"ll have our first big cube ready!

xlink:href由于SVG2而被弃用,但出于兼容性的目的,最好使用它。在现代浏览器中,您可以只使用href,但我在Safari上测试过它,在编写本文时,它还不能工作。如果使用xlink:href请确保将此命名空间包含在SVG标记中:>(如果决定使用href,则不需要它)。

第2部分:使用CSS变量将不同的样式应用到重用的图形中,我为多维数据集选择了一种主颜色,即边的浅色和深色以及笔划颜色。但是如果我们想让第二个立方体变成不同的颜色呢?

我们可以用CSS变量替换填充和笔划,以使这些属性更加灵活。这样,我们就可以在另一个调色板上重用同一个立方体单元(而不是为第二个立方体定义第二个具有不同颜色的单元)。为什么不向新的立方体添加一个类并用CSS更改填充颜色呢?我们会这样做,但首先,试着检查一个<use>元素。你会注意到它在阴影DOM中呈现。这意味着它不像普通DOM中的元素那样容易受到脚本和样式的攻击。在<defs>中定义的任何值都将被它的所有实例继承,您将无法用CSS重写这些值。但是,如果您用变量替换这些值,那么您就可以在CSS中控制它们。

在我们的多维数据集单元中,我们将遍历每一边,并用语义变量名替换fill和stroke值。

例如,如果我们将这两个值保存在同一文档中,则这是:

<rect>

…can be replaced with this:

<rect>

From here, we must duplicate the SVG to build a second cube. However, we don\"t need to duplicate <defs>。我们可以向每个SVG添加一个类并通过CSS控制调色板,重新定义变量的值。

让我们为蓝色立方体创建一个调色板,为粉色立方体创建另一个调色板:

.blue-cube {--mainColor: #009CDE;--strokeColor: #0079ad;--lightColor: #00affa;--darkColor: #008bc7;}.pink-cube {--mainColor: #de0063;--strokeColor: #ad004e;--lightColor: #fa0070;--darkColor: #c7005a;}
CodePen嵌入回退

,我们可以添加任意多个立方体,并在一个地方更改所有颜色。

第3部分:重用动画

此示例的思想是在悬停时分解立方体-类似分解视图的东西,这样当我们将光标放在立方体上时,一些块会从中心移开。

CodePen Embed Fallback

让我们从定义两个移动开始,每个轴一个:move Ymove X。通过将动画划分为运动,我们将能够在每个立方体中重用它们。动画将包括移动立方体从其初始位置到30px或50px远离一个方向。我们可以使用transform-translate(XY)来实现这一点。例如:

@keyframes moveX {to { transform: translateX(-35px);}}

但是如果我们想重用这个动画,最好用

CSS使用和重用SVG中的一切…甚至动画! 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%bd%bf%e7%94%a8%e5%92%8c%e9%87%8d%e7%94%a8svg%e4%b8%ad%e7%9a%84%e4%b8%80%e5%88%87%e7%94%9a%e8%87%b3%e5%8a%a8%e7%94%bb%ef%bc%81/

发表评论

您的电子邮箱地址不会被公开。