在 SVG 动画中表示颜色的不同方式

已发表: 2022-12-25

当谈到 SVG 动画中的颜色时，有几个不同的选项可用。表示颜色的最常见方法是使用 RGB（红、绿、蓝）颜色模型。该模型由三种颜色组成，每种颜色都可以用 0 到 255 之间的数字表示。通过组合这三种颜色，可以创建范围广泛的不同颜色。在 SVG 动画中表示颜色的另一种选择是使用 HSL（色调、饱和度、亮度）颜色模型。该模型也由三种颜色组成，但每种颜色都由 0 到 360 之间的数字表示。设计师经常使用该模型，因为它允许更大范围的颜色。最后，还有 CMYK（青色、洋红色、黄色、黑色）颜色模型。该模型由四种颜色组成，每种颜色都可以用 0 到 100 之间的数字表示。这种模型经常用于印刷，因为它允许更大范围的颜色。

SVG（可缩放矢量图形）是一种 XML 语言，可让您创建 2D 和混合源矢量图形。可以对某些重叠层进行着色、纹理化、阴影处理或以其他方式塑造以满足您的特定需求。填充和描边都是绘画过程的一部分。本文的目的是向您介绍可以为 SVG 文本和形状着色的每种方法。定义 SVG 颜色的语法是 style=”stroke-width:2, stroke-color:green,” 填充是#ff0000。根据可缩放矢量图形 (SVG) 规范，图形行业大约有 147 种颜色名称。按照以下方式设置名称颜色。

为字母表中的字母填充颜色代码。可以为每个两位十六进制对分配一个从 0 到 FF 的值。 # RRGGBB对应代码。填充表示对象在其形状内的颜色，而描边表示从形状外部可见的轮廓。如果未指定填充属性（或样式属性的填充属性），则它是默认值。填充和描边可用于各种 SVG 形状，例如圆形、椭圆形、矩形、多段线和多边形。填充属性用于指定元素内部的颜色。当您使用填充填充SVG 路径时，您可以为开放路径着色，就像它连接到第一个路径一样，直到该部分中的描边颜色被删除，即使该点没有连接到第一个。如果未指定填充属性值，则默认为黑色。

有两种方法可以在SVG 文件中指定这些属性：作为样式属性（填充和描边属性）和作为表示属性（填充和描边属性）。 style 属性可用于根据填充和描边属性为 SVG 元素设置颜色，或者它们可用于根据填充和描边属性设置颜色。

在 SVG 文件中，XML 代码指定构成图像的各种形状、颜色和文本。

对于 PostgreSQL 文档，世界上有 1600 万种颜色。其中一些具有单独的颜色名称。

你如何给动画上色？

您可以通过几种不同的方式为动画着色。一种方法是使用传统的 cel 动画，这涉及手动绘制 cels（帧）。另一种方法是使用计算机辅助动画，它允许您以数字方式为帧着色。最后，您还可以结合使用传统动画和计算机辅助动画来为动画着色。

颜色是动画和游戏设计的重要组成部分。色彩设计师通过观察光照、纹理、运动甚至角色发展来为动画设定视觉基调，所有这些都包含在每个场景和动作中。颜色键艺术家首选的颜色样式工具是 Adobe Illustrator 和 Photoshop。色键艺术家为动画创建配色方案，绘制和设计动画背景，并与动画或游戏设计行业的技术总监合作进行灯光装置设计。

你能用颜色填充 Svg 吗？

是的，您可以用颜色填充 svg。为此，您需要使用 fill 属性。 fill 属性可用于设置svg 元素内部的颜色。

称为 sRGB 的与设备无关的颜色空间用于指定 SVG 颜色。因此，无论其颜色配置文件如何，任何设备都可以使用 SVG 颜色。所有颜色都包含三个主要成分：红色、绿色和蓝色 (RGB)。通过组合它们，我们可以看到周围环境的颜色。因为 RGB 颜色是在三个维度上定义的，所以它们在不同的设备上看起来可能不同。在绿色屏幕的设备上，红色屏幕上的绿色不同于绿色屏幕设备上的绿色。 SVG 中的颜色可用于具有包含其颜色的配置文件的任何设备。

如何更改 Svg 背景的颜色

但是，您可以使用一些技巧来获得所需的结果。 image> 元素的 src 属性允许您引用服务器上的颜色匹配图像文件。您还可以使用 *pattern] 元素来创建自定义颜色、渐变或图案。可以通过使用 color> 元素设置整个图像的填充颜色来更改SVG 背景的整体颜色。

Svgs 可以有动画吗？

由于能够随时间改变矢量图形，因此可以使用 SVG 创建动画效果。要对SVG 内容进行动画处理，您可以使用以下方法。 SVG 中的元素可用于创建动画场景。可以使用 SVG 在文档片段中描述对元素的易失性更改。

它是一种 XML 标记语言，允许在可缩放矢量图形 (SVG) 中表示二维图像。您现在可以从 Animate 中导出SVG 文件，而无需创建任何额外的 ID 或定义。此选项将允许导出 SVG 文件，从而提高导入到 Character Animator 中的 SVG 文件的质量。声明多个符号并在不丢失内容的情况下导出它们都是导出过程的一部分。它类似于 Animate 中舞台上的艺术品。此功能取代了 Animate (13.0) 中删除的 FXG 导出功能。 SVG 格式不支持某些 Animate 功能。导出使用这些功能创建的内容时，它要么被删除，要么默认为支持的功能。

使用 WebGL 或 Web Animations API，您可以生成交互式 SVG 图形。您可以使用这些 API 中的任何一个创建复杂的动画，而无需依赖外部脚本。 Web Animations API 是在所有现代浏览器中使用的 JavaScript API，而 WebGL API 仅在最新的浏览器中使用。使用 Web Animations API 时，您可以创建将由用户启动的操作触发的动画。您可以通过这种方法在您的网站和用户之间创造一种互动的错觉。 WebGL API 的性能优于 Web Animations API，但 Web Animations API 则不然。由于其更高的性能，WebGL API 是比 WebAnimations API 更好的选择。然而，并非所有现代浏览器都支持 WebGL API，这是一个缺点。使用 WebAnimations API 是创建所有现代浏览器都支持的 SVG 动画的最佳方式。

如何为 Svg 文件制作动画

创建动画 SVG 文件有许多不同的方法，脚本是主要方法。 Animate 动画可以使用导出选项导出为 sva 文件。

Svg 动画颜色

SVG 支持所有属性的动画，包括元素或其子元素的颜色。通过使用 animate 元素以及其他动画元素（如 animateColor），可以创建可用于提高文档的可用性和视觉吸引力的复杂动画。

在 CodePen 中，您可以在基本 HTML5 模板的 body 标签中编写任何您想要的内容。这是添加可能影响整个文档的类的位置。 CSS 可以从 Web 上可用的任何样式表应用到您的 Pen。您的 Pen 有许多可用的脚本，可以从 Internet 上的任何位置运行。在 Pen 中创建 JavaScript 后，我们将按照您拥有它的顺序保存它。如果您链接的脚本包含预处理器的扩展，我们将尝试在应用前对其进行处理。

Svg 动画 Css

SVG 动画是为您的网页设计增添活力和交互性的绝佳方式。您可以使用 CSS 为您的SVG 插图创建动画版本，结果可能会令人惊叹。使用 CSS 制作 SVG 动画时，需要牢记一些事项。首先，您需要确保要制作动画的元素具有正确的尺寸。否则，动画将无法正常显示。其次，您需要为要设置动画的属性设置正确的值。 CSS 动画基于关键帧，因此您需要为每个关键帧指定值。最后，您需要选择正确的动画属性。一些属性，如“transform”和“opacity”，是 SVG 动画的理想选择。其他的，比如“stroke-dasharray”，使用起来可能有点棘手。牢记这些技巧后，您就可以开始使用 CSS 制作 SVG 动画了。玩得开心，有创意！

在本教程中，我们将使用 CSS 来演示如何使用基本步骤优化和动画 SVG。此功能使我们能够通过包含 Bootstrap 4.1.3 来保持简单并专注于动画。如果您使用的是引导程序，请确保 SVG 的 img-fluid 类在手机上的大小合适。使用 SVG 中的类，您可以选择单个形状。为了让 CSS 理解我们想要特定动画做什么，必须用它的名称和关键帧来声明它。要为文本设置动画，矩形必须已经淡出。这一步需要改变三次贝塞尔曲线，让它移动得更快。播放动画时，代表我们中间的关键帧出现在 40% 处。当我们将 stroke-dashoffset 从零移动到零时，破折号覆盖了所有路径。

Svg 路径填充颜色动画

使用 CSS3，您可以为 SVG 路径的填充颜色创建各种不同的动画。您可以使用关键帧指定动画中不同点的填充颜色值。您还可以使用过渡计时功能来控制动画的速度。

CSSTricks：动画 SVG 路径变化。 DigitalOcean 的云服务可以量身定制，以满足您旅程中每个阶段的需求。对于前 200 美元，您将获得 200 美元的免费赠金。这是我如何使用所有基本命令使用 CSS（仅限 Chromium）绘制事物并为其制作动画的经典示例。