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

Question

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

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

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

我有几点感悟:

1. 这是我第一次这样做 - 当我导航到应用程序中的其他地方并返回(它再次显示 SVG)时，它开始工作。
2. 当我在 Dev 工具中检查代码时，我看到该元素有“selected”类，而且该元素有彩色填充(在 CSS 检查器中)- 但它对用户不可见。当我在 CSS 检查器中禁用和启用任何 CSS 规则时，它开始工作。 我研究了 Chrome 的变更日志，但找不到任何相关内容。它在所有其他主要浏览器中运行良好。

编辑:无论我将规则添加到元素的方式如何，它都不会呈现它，直到我重新加载整个父元素，这是我做不到的。 代码似乎完全符合我的要求(在内部)，但 Chrome 不会显示更改。 有什么方法可以模拟与 Google 开发工具 css 规则更改相同的操作吗？ (它总是为我修复它)？

亲切的问候， 卢卡斯

Answer 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 .