如何将 css 操作为 SVG

【问题标题】：How can I manipulate css into a SVG如何将 css 操作为 SVG
【发布时间】：2014-06-19 17:25:49
【问题描述】：

我正在尝试通过正确分配 css 来改进我的代码：

isChecked = jqElement.is(':checked');
type = jqElement.attr('tag');
var start = new Date().getTime();
elements = document.getElementsByClassName(type);
console.log('LAYER ' + type + ': ' + elements.length);
for (j=0; j<elements.length; j++){
    element = elements[j];
if (isChecked)
    element.classList.remove('hide-layer');
else
    element.classList.add('hide-layer');
//element.className += ' hide-layer';
//element.className = type;
//element.setAttribute('visibility', (isChecked)? '' : 'hidden');
}

使用 element.className += ' hide-layer' 不起作用使用 element.className += ' hide-layer' 需要一段时间（对于 1996 年具有相同类的路径元素，需要 8 秒）

css 类是这样的：

.hide-layer{
    visibility:hidden;
}

希望你能帮助我。提前致谢！

【问题讨论】：

标签： javascript css svg

【解决方案1】：

如果您在要隐藏的元素上设置类，则可以操纵类规则，即编辑

.hide-layer{
    visibility:hidden;
}

成为

.hide-layer{
    visibility:visible;
}

您可以通过

访问样式表

document.styleSheets

如果上面的规则是页面唯一样式表中的唯一规则，那将是

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

和

document.styleSheets[0].cssRules[0].style.setProperty('visibility','visible',null);

将更新规则中的可见性属性。

【讨论】：