javascript - 使用 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 上定义了 stopColor 属性.getElementByid("firstGradient") 返回。没有。

您称为“firstGradient”的元素是 SVGStopElement正如您从规范中看到的，它没有提供任何 stopColor 属性。

但是没有理由感到困扰 - 通过更改实际的元素属性，您将更改停止颜色，这就是文档对象模型的工作方式 - 您根本不需要使用元素的任何特殊属性来更改停止颜色实际属性:

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

仅此而已。 setAttribute 函数可用于任何文档元素、SVG、HTML 或任何其他命名空间/类型。

顺便说一句，我不会将停止颜色称为渐变 - 将您称为“firstGradient”的元素称为“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 的语义(不渲染渐变)他们自己)元素，是疯狂的——基本上，这是一个泄漏的抽象。