页面上"color" >元素的颜色和<输入类型= 与其值属性不匹配

Question

我正在做一个个人练习，我创建了一个小应用程序，允许用户使用<input type = "color">元素更新 SVG 不同部分的颜色。

我正在玩的SVG是一个简单的云图，里面有文字。您可以修改 3 个部分：云的笔触颜色、云的填充颜色和书写的颜色。

现场观看：

1. 直播： https://argonathmos.github.io/SVGfun/

2. 代码：https://github.com/argonathmos/SVGfun

这是一个简单的用户界面，具有 3 个区域：

1. 一个随机按钮，用于将随机颜色应用于 .SVG。
2. SVG 的每个部分的三个<input type="color">元素 手动修改每种颜色。
3. 一个下载按钮，允许 用户导出应用了自定义颜色的 SVG。

以下是我注意到困扰我并且还不知道如何解决的问题：

• 当我单击"随机"时，SVG 颜色会更新，<input type="color">元素的值以及页面上元素的颜色(即小方块颜色与相关 SVG 部分的颜色匹配(。

• 当我通过<input type="color">元素单独应用颜色时，SVG 的颜色以及<input type="color">元素的值都会更新，页面上输入颜色元素的颜色(小方块(也会更新。

• 但是，如果我在手动从颜色选择器中选择颜色后单击"随机"： SVG 颜色会更新，<input type="color">元素的 value 属性也会更新，但页面上元素的颜色不会更新，其颜色与之前手动选择的颜色相同。(即小方块颜色与关联的 SVG 部分的颜色不匹配，即使元素的值属性不匹配。

Answer 1

问题似乎是，您正在使用

strokeColorInput.setAttribute('value',strokeColor);

以更新颜色输入字段的值。这能够为您尚未明确选择的字段设置颜色，但是一旦您这样做了，它就不再按预期工作。

(这可能是众所周知的属性与属性问题/问题的表现，请参阅 HTML 中的属性和属性有什么区别？

做那个

strokeColorInput.value = strokeColor;

相反，它似乎工作正常。

Answer 2

将strokeColorInput.setAttribute、fillColorInput.setAttribute、pathColorInput.setAttribute更改为：

strokeColorInput.value = strokeColor;
fillColorInput.value = fillColor;
pathColorInput.value = uniquePathcolor;

当您更新 HTML 值时。.setAttribute用于 CSS 属性值。