SVG 重启属性

什么是 SVG？

SVG（Scalable Vector Graphics）是一种基于 XML 的图像格式，可用于表示 2D 图形、图表、图标、地图等等。与其他图像格式（如 JPG 或 PNG）不同，SVG 是一种矢量图形格式，意味着 SVG 图像可以被缩放到任意大小而不会失真。

SVG 属性

在 SVG 中，每个元素都有一组属性，可以用来指定元素的样式、位置、颜色、大小等等。常用的 SVG 属性包括：

• width 和 height：指定 SVG 元素的宽度和高度，单位可以是 px、em、rem 或 %。
• viewBox：定义 SVG 元素的坐标系和视窗大小。
• fill 和 stroke：填充和描边的颜色，可以是具体颜色值、CSS 颜色关键字或 URL（用于引用渐变或图案）。
• opacity：指定元素的不透明度，取值范围为 0 到 1（默认值为 1）。

除了这些常用属性之外，还有一些比较特殊的 SVG 属性，如：

• transform：指定元素的变换。可以用来旋转、平移、缩放、扭曲 SVG 元素。
• fill-opacity 和 stroke-opacity：控制填充和描边颜色的透明度。
• filter：应用 SVG 滤镜效果。

这些属性使得 SVG 样式非常灵活和丰富。

SVG 重启属性

有时候，我们想要某些 SVG 元素的属性恢复到默认值，这时候就可以使用 SVG 重启属性。重启属性会将一个或多个属性恢复到默认值。如果继承属性（如 fill 或 stroke ）已被设置，重启属性将清除这些属性并恢复到默认值。

下面是重启属性的示例：

<rect x="10" y="10" width="100" height="100" fill="blue"/>
<rect x="120" y="10" width="100" height="100" fill="red" stroke="black" stroke-width="2"/>
<rect x="230" y="10" width="100" height="100" fill="green" stroke="blue" stroke-width="3"/>

<button onclick="resetRects()">重置</button>

<script>
function resetRects() {
  var rects = document.querySelectorAll("rect");
  for (var i = 0; i < rects.length; i++) {
    rects[i].setAttribute("style", "all: unset");
  }
}
</script>

这段代码创建了 3 个矩形元素，并在其中两个元素上定义了 fill、stroke 和 stroke-width 属性。当单击“重置”按钮时，三个矩形的样式将被重置为默认值。在 JavaScript 中，我们可以使用 setAttribute("style", "all: unset") 将所有属性都设置为默认值。如果我们只想重置部分属性，可以指定特定的属性名称，例如 setAttribute("fill", "currentColor") 将 fill 属性重置为当前文本颜色。