SVG 元素 CSS 更改在 Chrome 35 - 36 中不可见答案

【问题标题】：SVG Element CSS change not visible in Chrome 35 - 36SVG 元素 CSS 更改在 Chrome 35 - 36 中不可见
【发布时间】：2014-07-24 18:46:38
【问题描述】：

我有一个包含一堆 SVG 元素的应用程序。当我将鼠标悬停在 SVG 元素上时，它们会暂时改变颜色，如果我单击一个，它会永久改变颜色（或直到再次单击它）。单击 SVG 元素时，将调用此代码：

styles = styles + " selected";
$(this).attr("class", styles);

CSS 规则用颜色填充 SVG 元素。这在所有浏览器中工作了一段时间，但在 Chrome 35 中已停止工作，并且问题在 36 beta 中仍然存在。好像是37修复的。在 Chrome 中，GUI 似乎卡住了 - 悬停和单击操作有效，但颜色变化不可见 - 代码执行正确，但似乎未正确呈现。

我有几个见解：

这是我第一次这样做 - 当我在应用程序的其他位置导航并返回（它再次显示 SVG）时，它开始工作。
当我在开发工具中检查代码时，我看到该元素具有“选定”类，并且该元素具有彩色填充（在 CSS 检查器中） - 但它对用户不可见。当我在 CSS 检查器中禁用和启用任何 CSS 规则时，它开始工作。我研究了 Chrome 的变更日志，但找不到任何相关内容。它在所有其他主流浏览器中都能正常工作。

编辑：无论我将规则添加到元素的方式如何，在我重新加载整个父元素之前它都不会呈现它，这是我无法做到的。代码似乎完全符合我的要求（内部），但 Chrome 不会显示更改。是否有某种方法可以模拟与 Google 开发工具 css 规则更改相同的操作？（这总是为我解决问题）？

亲切的问候，卢卡斯

【问题讨论】：

您好 Robert，问题是 - 为什么它不能像在其他浏览器或 Chrome 版本中那样正确填充，我该如何强制它按照我想要的方式运行？
可能是一个错误。正如您已经发现的那样，您可以删除并重新创建 CSS 规则来解决它。
即使我尝试像这样在 js 中禁用和重新启用规则： $(this).css("fill",""); $(this).css("fill","#02B2B0");它不起作用。这是你的意思吗？
不，我不是这个意思。我的意思是删除规则本身并重新创建它，而不是重新创建您对规则的元素分配。
罗伯特，感谢您帮助我。我不明白我应该怎么做。 css 规则在 .css 文件中定义并且可以正常工作。如何模拟与 Chrome 开发人员工具中相同的行为 - 禁用和启用规则？

【解决方案1】：

如果您想更新网页的 CSS 规则，您可以通过

访问它们

document.styleSheets

所以第一个样式表应该是

document.styleSheets[0]

如果你有

p {
    color: blue;
}

然后在页面的唯一样式表中

var rule = document.styleSheets[0].cssRules[0]

和

document.styleSheets[0].cssRules[0].style.setProperty('color','#00cc00',null);

将更新规则中的颜色属性。还有更多信息here。

【讨论】：