CSS动态修改SVG各线条颜色

可以使用CSS的`stroke`属性来动态修改SVG中的线条颜色。

首先，为SVG元素添加一个唯一的`id`属性：

<svg id="my-svg" width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" stroke="#000"></line>
  <line x1="100" y1="0" x2="0" y2="100" stroke="#000"></line>
</svg>

然后，使用CSS的`stroke`属性来修改线条颜色。例如，当鼠标悬停在SVG元素上时，将线条颜色修改为红色：

#my-svg line:hover {
  stroke: red;
}

这样，当鼠标悬停在SVG元素上时，所有线条的颜色都会变成红色。

如果你想要单独修改某条线的颜色，可以给这条线添加一个唯一的`id`属性，然后使用CSS的`stroke`属性来修改该线的颜色。例如：

<svg width="100" height="100">
  <line id="my-line" x1="0" y1="0" x2="100" y2="100" stroke="#000"></line>
</svg>

#my-line:hover {
  stroke: red;
}

这样，当鼠标悬停在该线上时，该线的颜色会变成红色。

相关问题

CSS动态修改SVG图标颜色

可以使用CSS的`fill`属性来修改SVG图标的颜色。具体步骤如下：

1. 在HTML中将SVG图标插入到页面中：

<svg class="icon" viewBox="0 0 512 512">
  <path d="M256 0C114.844 0 0 114.844 0 256s114.844 256 256 256 256-114.844 256-256S397.156 0 256 0zm0 480c-119.297 0-224-94.703-224-224S136.703 32 256 32s224 94.703 224 224-94.703 224-224 224z"></path>
</svg>

2. 添加CSS样式，使用`fill`属性修改图标颜色：

.icon {
  fill: #000; /* 默认黑色 */
}

.icon:hover {
  fill: #ff0000; /* 鼠标悬停时红色 */
}

注意：有些SVG图标可能没有填充（fill）属性，只有描边（stroke）属性，此时可以使用`stroke`属性来修改描边颜色。

svg图片怎么单独修改线条颜色

要单独修改 SVG 图片中的线条颜色，可以使用 CSS 的 stroke 属性。具体步骤如下：

1. 在 SVG 图片中，找到你想要修改颜色的线条对应的标签，通常是 path 或 line 标签。

2. 为该标签添加一个 class 或 id 属性，方便在 CSS 中选择。

3. 在 CSS 中，使用 stroke 属性设置线条颜色，例如：

.my-line {
  stroke: red;
}

其中，.my-line 是你在 SVG 标签中添加的 class 或 id 属性名，red 是你想要设置的颜色。

4. 将 CSS 文件引入到 HTML 页面中，确保 SVG 图片和 CSS 文件都被正确加载。

5. 确认修改生效，如果没有生效，可以检查一下 SVG 标签中是否正确添加了 class 或 id 属性，以及 CSS 文件是否被正确引入。