CSS怎么设置SVG图片颜色|极客教程

CSS怎么设置SVG图片颜色

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以为网页提供高质量且可伸缩的图像。在网页开发中，CSS可以用来控制和改变SVG图片的样式，其中包括设置颜色。本文将详细探讨如何使用CSS来设置SVG图片的颜色。

什么是SVG图片

SVG是一种矢量图形格式，与像素图像不同，它使用数学描述来定义图形，这使得它们在不同大小的设备上都能保持清晰和锐利，而无需像素化。SVG图像是基于路径、形状和文本的，可以通过文本编辑器进行编辑和创建。

在网页开发中，SVG图片通常以内联方式嵌入在HTML文档中，可以在<img>标签中使用src属性指向SVG文件，也可以直接在HTML中嵌入SVG代码。除此之外，SVG也可以通过CSS和JavaScript进行样式和交互的控制。

SVG图片的颜色设置

SVG图片的颜色可以通过多种方式来设置，包括内联样式、CSS样式和类名。下面将分别介绍这些设置颜色的方法。

内联样式

在SVG代码中，可以使用内联样式来定义图形的颜色，这种方式直接在元素标签中设置fill属性来指定填充颜色，或者设置stroke属性指定描边颜色。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" style="fill: red; stroke: blue; stroke-width: 2;"/>
</svg>

上面的示例中，rect元素表示一个矩形，通过style属性设置了矩形的填充颜色为红色（fill: red）和描边颜色为蓝色（stroke: blue）。

CSS样式

除了使用内联样式，也可以通过外部CSS样式表来控制SVG图片的颜色。可以通过选择器和属性来设置SVG元素的颜色样式。

.svg-img {
  fill: green;
  stroke: yellow;
}

<svg class="svg-img" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

在上面的示例中，通过CSS样式表中的.svg-img选择器，设置了fill属性为绿色和stroke属性为黄色。在SVG代码中，使用了class属性将这个样式应用到svg元素上。

类名控制

除了直接在CSS样式表中设置颜色样式，也可以通过添加类名的方式来控制SVG图片的颜色。这样可以方便地在不同场景下改变SVG图片的颜色风格。

.red {
  fill: red;
}

.blue {
  fill: blue;
}

<svg class="red" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

<svg class="blue" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

在上面的示例中，通过定义.red和.blue类名，可以分别设置SVG图片的填充颜色为红色和蓝色，然后在SVG代码中使用这些类名来控制颜色。

怎么设置SVG图片颜色

在实际开发中，根据不同的需求和场景来设置SVG图片的颜色。下面列举了一些常见的情况和解决方案。

单色SVG图片

对于单色的SVG图片，可以使用fill属性设置填充颜色，stroke属性设置描边颜色。这样可以很方便地控制SVG图片的颜色。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="#ff0000" stroke="#000000" stroke-width="2"/>
</svg>

上面的示例中，通过在rect元素中设置fill属性来指定填充颜色为红色，并通过stroke属性指定描边颜色为黑色。

多色SVG图片

对于多色的SVG图片，可以在SVG代码中使用多个图形元素来表示不同部分，然后分别设置不同的颜色。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="80" fill="red"/>
  <rect x="40" y="10" width="30" height="80" fill="green"/>
  <rect x="70" y="10" width="30" height="80" fill="blue"/>
</svg>

上面的示例中，通过三个矩形元素表示不同颜色的部分，分别设置为红色、绿色和蓝色。

动态变化颜色

使用CSS和JavaScript，可以实现动态变化SVG图片的颜色效果。例如，通过JavaScript在鼠标悬停事件时改变SVG图片的颜色。

<svg id="svg-img" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>

<script>
  const svgImg = document.getElementById('svg-img');

  svgImg.addEventListener('mouseover', function() {
    svgImg.querySelector('rect').setAttribute('fill', 'pink');
  });
</script>

在上面的示例中，当鼠标悬停在SVG图片上时，通过JavaScript代码改变rect元素的填充颜色为粉红色。