css svg

什么是SVG？

可缩放矢量图形（Scalable Vector Graphics，简称SVG）是一种用于描述二维矢量图形的XML 格式的文件，它可以被展示在网页上，并且可以通过CSS进行样式化。

与传统的基于像素的位图图像（如JPEG或PNG）不同，SVG 使用矢量图形，这意味着它们可以根据所使用设备的分辨率进行缩放而不失去清晰度。这使得SVG非常适合用于创建响应式网页设计，使图像能够自适应不同大小的屏幕和设备。

SVG 图形由一系列的形状、路径、文本和图案组成，可以使用CSS样式对这些图形进行样式化，以达到自定义的外观。

SVG与CSS的结合

SVG 可以使用CSS来为其元素应用样式，使它们具有各种视觉效果。通过将CSS样式表与SVG文档相关联，我们可以轻松地改变SVG元素的填充、边框、字体、颜色等属性。此外，还可以使用CSS过渡和动画来为SVG元素添加动态效果。

使用CSS选择器选择SVG元素

在 SVG 中，每个元素都是一个DOM节点，因此可以使用CSS选择器来选择SVG元素。选择器的语法与HTML中相同。例如，要选择ID为myCircle的圆形元素，可以使用以下代码：

#myCircle {
  fill: red;
  stroke: blue;
}

这将使圆形元素的填充颜色为红色，边框颜色为蓝色。

SVG中的CSS属性

SVG 元素可以使用一系列的CSS属性进行样式化。以下是一些常用的SVG样式属性：

fill: 设置元素的填充颜色。
stroke: 设置元素的轮廓颜色。
stroke-width: 设置元素的轮廓宽度。
opacity: 设置元素的不透明度。
font-family: 设置文本的字体系列。
font-size: 设置文本的字体大小。

实例：样式化SVG元素

让我们在一个示例中演示如何使用CSS样式化SVG元素。

首先，我们创建一个<svg>元素和一个圆形元素：

<svg id="mySVG" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" />
</svg>

接下来，我们使用CSS样式对圆形元素进行样式化：

#myCircle {
  fill: red;
  stroke: blue;
  stroke-width: 2;
}

这将使圆形元素的填充颜色为红色，边框颜色为蓝色，并设置边框宽度为2像素。

最后，我们将CSS样式表与SVG文档相关联：

<style>
  #myCircle {
    fill: red;
    stroke: blue;
    stroke-width: 2;
  }
</style>
<svg id="mySVG" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" />
</svg>

可以看到，圆形元素被样式化为红色填充、蓝色边框，并且边框宽度为2像素。

SVG图案填充

SVG 还支持使用CSS中的图案填充来填充形状。通过使用fill属性并指定图案的URL，可以将图案应用于SVG元素。CSS中的url()函数用于指定图案的URL。

以下是一个应用图案填充的示例：

#myRectangle {
  fill: url(#pattern);
}

在上面的代码中，我们为具有ID为myRectangle的矩形元素指定了一个图案填充。图案的URL指定为#pattern。

要定义图案，我们需要在SVG文档中定义一个<pattern>元素，并为其指定一个唯一的ID。然后，我们可以在<pattern>元素中定义图案的细节，例如图案的宽度和高度、填充颜色等。

下面是一个例子，展示如何使用CSS图案填充SVG元素：

<svg width="300" height="300">
  <defs>
    <pattern id="pattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect width="20" height="20" fill="red" />
      <circle cx="10" cy="10" r="5" fill="blue" />
    </pattern>
  </defs>
  <rect id="myRectangle" x="50" y="50" width="200" height="200" />
</svg>