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

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

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

但是没有麻烦的原因-通过更改实际的元素属性，您可以更改终止色，这就是文档对象模型的工作原理-您完全不需要使用元素的任何特殊属性即可更改实际属性：

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

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

顺便说一句，我不会将终止色称为渐变-调用您要调用的元素“ firstGradient”只是一种误导作用-它是终止色而不是梯度，则梯度是实际的linearGradient元素。因此，如果要分配标识符，请分别为第一个stop和第二个document.querySelector("linearGradient > stop:nth-of-type(1)").setAttribute("stop-color", "red");元素分配“ gradientFirstStopColor”和“ gradientSecondStopColor”。

但是您也可以按照其在子层次结构中的顺序来识别终止色元素：

querySelectorAll("linearGradient > stop")[1]

您可以使用其他CSS选择器或API（例如style），我的意思是您不必绝对诉诸于分配标识符，尽管这在某些情况下会有所帮助-它们绝对有其合法用途。

当然，在stop元素上使用style属性也是可行的，但我个人认为在未渲染的元素（渐变本身不会渲染）上使用| Date(DateTime) | SensorId(int) | Value(Double) | | ------------------- | ------------- | ------------- | | 2019-10-09T23:00:00 | 1 | 15 | | 2019-10-10T00:00:00 | 1 | 15 | | 2019-10-10T00:00:00 | 2 | 3.5 | | 2019-10-10T00:00:00 | 3 | 765 | | 2019-10-10T01:11:11 | 1 | 10 | | 2019-10-10T01:11:11 | 2 | 4 |的语义是傻瓜-基本上是泄漏的抽象。

Answer 2

您尝试过以下方法吗：

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

使用JS更改SVG的渐变

2 个答案: