CSS 中 SVG 属性指南

字体属性

文本属性

蒙版属性

交互属性

颜色属性

可见性属性

文本属性

裁剪属性

蒙版属性

滤镜效果

渐变属性

交互属性

颜色属性

绘制属性

虽然表示属性可以作为 CSS 属性来为 SVG 设置样式，但是如何使用 CSS 控制 SVG 元素的坐标和尺寸呢？SVG 2（在撰写本文时处于候选推荐阶段）使得对这些属性进行样式设置和动画成为可能。

SVG 2 规范指出

一些样式属性不仅可以在样式表和“style”属性中指定，还可以通过表示属性指定。这些属性的名称与给定的 CSS 属性匹配（或类似），并且其值会被解析为该属性的值。”

这不仅意味着可以使用 CSS 作为表示属性或在样式表中为 SVG 属性设置样式，还可以应用于 CSS 伪类，例如 :hover 或 :active。

SVG 2 还引入了更多可以用作样式属性的表示属性。这些属性可以在SVG 2 规范中找到。

需要注意的是，并非每个 SVG 元素都支持相同的 CSS 属性。就像可以应用于某些 SVG 元素的 CSS 属性一样，某些 SVG 元素也支持特定的属性。

例如，<circle> 或 <ellipse> 元素支持 cx 和 cy 属性作为形状中心的坐标。该元素还支持 rx 和 ry 属性作为半径，但 <rect> 元素不能使用这些属性。

几何属性

在 SVG 2 中，诸如 rx 和 ry 之类的属性被定义为几何属性。几何属性可以用作 CSS 属性，就像 fill 或 stroke 属性等表示属性一样。这些 CSS 属性和相应的 SVG 元素包括

SVG 2 还使得可以使用 CSS 定位 SVG 元素成为可能。让我们从绘制一个具有以下 SVG 代码的矩形开始

<svg width="170" height="170">
  <rect x="10" y="10" width="150" height="150" />
</svg>

以及以下 CSS 代码

rect {
  fill: #6e40aa;
}

这将生成一个坐标设置为 10, 10 的矩形。使用 SVG 2，x 和 y 可以作为 CSS 属性应用。

/* This will work with SVG 2 */
rect {
  x: 10;
  y: 10;
  ...
}

SVG 代码将简化为以下代码

<svg width="170" height="170">
  <rect width="150" height="150" />
</svg>

你甚至可以使用 CSS 为 <rect> 元素设置 width 和 height，如下所示

rect {
  ...
  width: 150px;
  height: 150px;
  ...
}

这样，SVG 标记就只剩下以下代码了

<svg width="170" height="170">
  <rect />
</svg>

在撰写本文时，以下演示在 Blink（例如 Chrome 和 Opera）和 WebKit（例如 Safari）浏览器中可以正常工作，因为这些浏览器支持 SVG 2 功能。在此之前，让我们深入了解如何使用 CSS 覆盖 SVG 属性。

可以使用 CSS 覆盖该元素以创建形状变形。

相互变形的 SVG 路径必须具有相同的命令和相同数量的点，否则变形将无法正常工作。

让我们从绘制一个三角形形状的 <path> 元素开始。使用 d 属性将指定该元素的形状。

<svg height="220" width="300">
  <path d="M150 10 L40 200 L260 200Z" />
</svg>

为了使三角形变形为不同的形状，让我们使用 CSS 中的 d 属性覆盖 SVG 元素。

path {
  d: path("M150, 10 L40, 200 L260, 200Z");
  fill: #4c6edb;
}

让我们也为该属性添加一个 :active 伪类，以便在单击该元素时，形状将变形为正方形并更改其 fill 颜色。我们还添加一个 transition 属性，使形状变形动作看起来更平滑。以下是 CSS 代码：

path:active {
  d: path("M150, 10 L40, 200 L260, 200 L260, 200Z");
  fill: #4c6edb;
  transition: all 0.35s ease;
}

SVG 代码将是

<svg height="220" width="300">
  <path />
</svg>

想要另一个演示？这是 Chris Coyier 提供的一个很酷的演示，展示了悬停时 SVG 形状的变形！

可以使用 CSS 动画和过渡通过 CSS 为 SVG 属性添加动画。

在这个演示中，我们将绘制各种 SVG 元素并创建一个波浪动画。首先绘制五个 <circle> 元素。

<svg width="350" height="250">
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
  <circle class="shape" />
</svg>

我们将使用 CSS 变量和 :nth-child() CSS 伪类来定义每个 .shape 类。.shape 类将具有 50 的 cy 和 20 的 r。每个 .shape 类都将设置其自己的 cx 和 fill CSS 属性。

:root {
  --color-1: #6e40aa;
  --color-2: #4c6edb;
  --color-3: #24aad8;
  --color-4: #1ac7c2;
  --color-5: #1ddea3;
}

.shape {
  cy: 50;
  r: 20;
}

.shape:nth-child(1) {
  cx: 60;
  fill: var(--color-1);
}

.shape:nth-child(2) {
  cx: 120;
  fill: var(--color-2);
}

.shape:nth-child(3) {
  cx: 180;
  fill: var(--color-3);
}

.shape:nth-child(4) {
  cx: 240;
  fill: var(--color-4);
}

.shape:nth-child(5) {
  cx: 300;
  fill: var(--color-5);
}

到目前为止，它应该看起来像这样。

现在是时候添加动画了！首先使用 @keyframes 规则来定义 moveCircle 动画。

@keyframes moveCircle {
  50% {
    cy: 150;
    r: 13;
  }
}

这将使每个元素的 cy 坐标从 50 更改为 150，r 从 20 更改为 13。将以下内容添加到 .shape 类的 CSS 中以使动画无限循环。

.shape {
  ...
  animation: moveCircle 1250ms ease-in-out both infinite;
}

最后，为每个 .shape 类添加 animation-delay 到 CSS 中，除了 .shape:nth-child(1)，如下所示

.shape:nth-child(2) {
  ...
  animation-delay: 100ms;
}

.shape:nth-child(3) {
  ...
  animation-delay: 200ms;
}

.shape:nth-child(4) {
  ...
  animation-delay: 300ms;
}

.shape:nth-child(5) {
  ...
  animation-delay: 400ms;
}

SVG <pattern> 元素中的形状也可以使用 CSS 设置动画。这是 Dudley Storey 提供的一个很酷的演示，展示了这一点！