CSS 改变元素的属性

在本文中，我们将介绍如何使用CSS来改变SVG（可缩放矢量图形）中的元素的属性。CSS可以轻松地为网页添加样式和动态效果，而改变路径元素的属性可以使我们创建出更加丰富多彩的图形和动画效果。

阅读更多：CSS 教程

什么是元素？

在SVG中，元素用于定义图形的路径。路径是一系列的直线段、曲线段和椭圆弧段的集合，通过使用不同的指令来描述这些线段的类型和位置。路径还可以通过插入点、线和弧来实现形状的绘制。

下面是一个简单的元素的示例：

<svg>
  <path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black" />
</svg>

在上面的示例中，路径元素的d属性定义了一系列的路径指令，以创建一个包含四个直线和一个闭合路径的正方形。

如何改变元素的属性？

要改变元素的属性，我们可以使用CSS的样式规则。其中一些主要的属性包括： fill、 stroke、 stroke-width等。

改变填充颜色

使用fill属性可以改变元素的填充颜色。填充颜色可以使用具体的颜色值、十六进制值、RGB值以及颜色名称等表示。

下面是一个改变填充颜色的示例：

<svg>
  <style>
    path {
      fill: red;
    }
  </style>
  <path d="M10 10 H 90 V 90 H 10 L 10 10" />
</svg>

在上面的示例中，我们使用CSS的fill属性将元素的填充颜色设置为红色。

改变描边颜色和宽度

使用stroke属性可以改变元素的描边颜色。同样地，描边颜色可以使用具体的颜色值、十六进制值、RGB值以及颜色名称等表示。

下面是一个改变描边颜色和宽度的示例：

<svg>
  <style>
    path {
      stroke: blue;
      stroke-width: 2;
    }
  </style>
  <path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" />
</svg>

在上面的示例中，我们使用CSS的stroke属性将元素的描边颜色设置为蓝色，同时使用 stroke-width属性将描边的宽度设置为2个像素。

CSS动画

除了改变元素的属性外，我们还可以使用CSS动画实现路径元素的动态效果。CSS动画可以通过关键帧来定义路径的变化过程和终点状态。

下面是一个使用CSS动画改变元素形状的示例：

<svg>
  <style>
    @keyframes shapeAnimation {
      0% {
        d: path('M10 10 H 90 V 90 H 10 L 10 10');
      }
      50% {
        d: path('M10 10 H 90 V 10 H 10 L 10 10');
      }
      100% {
        d: path('M10 10 H 90 V 90 H 10 L 10 10');
      }
    }
    path {
      fill: red;
      animation: shapeAnimation 2s infinite;
    }
  </style>
  <path d="M10 10 H 90 V 90 H 10 L 10 10" />
</svg>

在上面的示例中，我们定义了一个名为shapeAnimation的关键帧动画，通过改变路径的起点和终点来实现形状的变化。通过使用animation属性将动画应用到元素上，并设置了2秒的动画时间和无限循环。