SVG描边颜色 - CSS

SVG（可缩放矢量图形）是一种使用XML语言描述二维图形的格式。SVG图像可以通过CSS进行修饰，其中包括描边颜色。

基础语法

要设置SVG描边颜色，需在SVG元素上使用stroke属性，并指定颜色值，如下所示：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="red" />
</svg>

此示例将创建一个宽为100和高为100的SVG元素，并在其中绘制一个红色描边矩形。

高级语法

除了指定静态颜色之外，也可以使用CSS变量或JavaScript动态指定描边颜色。

使用CSS变量

如下示例显示了如何在SVG元素中使用CSS变量：

<style>
  :root {
    --my-color: red;
  }
</style>

<svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" stroke="var(--my-color)" />
</svg>

此示例将创建一个CSS变量--my-color，然后将其应用于矩形的描边颜色。

使用JavaScript

使用JavaScript动态指定描边颜色需要进行一些DOM操作。例如，下面的代码使用querySelector获取SVG元素，然后将其描边颜色更改为JavaScript变量：

<svg id="svg" width="100" height="100">
    <rect x="10" y="10" width="80" height="80" stroke="red" />
</svg>

<script>
  let myColor = 'blue';
  document.querySelector("#svg rect").setAttribute("stroke", myColor);
</script>

总结

设置SVG描边颜色是从SVG中创建复杂图形的重要部分。可以使用静态颜色，也可以使用CSS变量或JavaScript动态指定颜色。借助这些技巧，可以创造出更丰富，更具互动性的SVG图形。