Question

我有一个包含一点css的SVG。我想使用javascript更改此SVG中的style元素，但在IE / Edge中，您可以使用style更改.innerHTML元素。相反，你需要.styleSheet.cssText，但我不能让它在我的SVG中工作。

这适用于非IE浏览器，用于获取和设置值：

var style  = document.getElementById('example').contentDocument.querySelector("style");
style.innerHTML = style.innerHTML.replace('foo', 'bar')

SVG（简化）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 494.08">
    <defs>
        <style id="SvgStyleSheet">
            .someClass{}
        </style>
        <!-- Some more definitions -->
    </defs>
    <!-- SVG elements here -->
</svg>

如何在此SVG中获取和设置样式？

Answer 1

事实证明我与.styleSheets.cssText非常接近，不得不稍微使用它。

为了让它在IE / Edge，Firefox，Android，Chrome和iPhone的浏览器中运行，我必须实现它们。

var svgDOC = document.getElementById('idOfSVG').contentDocument;

style = svgDOC.styleSheets[0];
// IE/Edge
if( typeof style.cssText !== "undefined" ){
    style.cssText = style.cssText.replace('foo', 'bar');
}
// Non IE/Edge:
else{
    var style = svgDOC.querySelector("style");
    style.innerHTML = style.innerHTML.replace('foo', 'bar');
}

注意：

值得注意的是，Firefox和其他人在编写时会返回实际的innerHTML。如果您没有换行符，则结果中不会出现换行符：
.example1{boo:bar;}

IE和Edge会返回一个已解析的结果。

.example1 { boo: bar; }

改变SVG＆＃39;风格＆＃39; IE / Edge中的元素

1 个答案: