使用 JS 更改 SVG 的渐变

Question

我正在尝试通过更改 stop-color 属性来更改以下 SVG 元素中渐变的停止颜色，但它不起作用：

<svg><defs> 
<linearGradient gradientTransform="rotate(90)">
<stop offset="40%" stop-color="purple" id="firstGradient"/>
<stop offset="100%" stop-color="red" id="secondGradient"/>
</linearGradient>
</defs>
<Here's a long line of picture>
</svg>

我正在使用以下脚本语句来尝试更改停止颜色：

document.getElementById("firstGradient").stopColor ="red";

我也试过document.getElementById("firstGradient").attr.stop-color = "red";。

这两种方法都不起作用。如何更改停止颜色？

Answer 1

您犯的错误是假设-我不确定您使用什么资源作为参考-是在document.getElementByid("firstGradient") 返回的任何对象上定义了stopColor 属性。没有。

您称为“firstGradient”的元素是SVGStopElement，从规范中可以看出，它不提供任何stopColor 属性。

但不必担心——通过更改实际元素属性来更改停止颜色，这就是文档对象模型的工作方式——您根本不需要使用元素的任何特殊属性来更改实际属性：

document.getElementById("firstGradient").setAttribute("stop-color", "red");

就是这样。 setAttribute 函数可用于任何文档元素、SVG、HTML 或任何其他命名空间/种类。

顺便说一句，我不会将停止颜色称为渐变 - 将您调用的元素称为“firstGradient”只是一种误导 - 它是 停止颜色 而不是 渐变，渐变是实际的linearGradient 元素。因此，如果要分配标识符，请将“gradientFirstStopColor”和“gradientSecondStopColor”分别分配给第一个和第二个stop 元素，如果有的话。

但您也可以使用它们在子层次结构中的顺序来识别停止颜色元素：

document.querySelector("linearGradient > stop:nth-of-type(1)").setAttribute("stop-color", "red");

您可以使用其他 CSS 选择器或 API（例如 querySelectorAll("linearGradient > stop")[1]），我的意思是您不必绝对求助于分配标识符，尽管这在某些情况下会有所帮助——它们绝对有其合法用途。

当然，在 stop 元素上使用 style 属性也可以，但我个人认为在非渲染（渐变本身不渲染）元素上使用 style 的语义是疯狂的——这是一个基本上是泄漏抽象。

Answer 2

现在是 2022 年，我们拥有原生 JavaScript Web 组件

将您的<svg> 包装在<svg-gradient> 中 Onload 它将读取定义的GRAD 颜色数组并创建 <stop > 值在您的<svg> 中

注意你定义和使用GRAD的3个地方；这允许在您的 <svg> 中使用多个渐变

<svg-gradient GRAD="red,red,red,red,red,red,#f8991d,#ffe400,#51ff00,#0066ae,#1b449c,#792b87">
  <svg viewBox="0 0 512 512">
    <defs>
      <linearGradient id="GRAD"></linearGradient>
    </defs>
    <circle r="255" cx="256" cy="256" fill="url(#GRAD)" />
  </svg>
</svg-gradient>


<script>
  customElements.define("svg-gradient", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure innerHTML was parsed
        this.querySelectorAll("linearGradient")
          .forEach(gradient => {
            gradient.innerHTML =
              this
              .getAttribute(gradient.id)
              .split(",")
              .map((color, idx, colors) => 
                 `<stop offset="${idx*1/colors.length}" stop-color="${color}"/>`)
              .join("")
          });
      })
    }
  })
</script>

Answer 3

你试过了吗：

document.getElementById("firstGradient").style.stopColor ="red";