javascript - SVG 对象样式属性作为 javascript 变量

Question

我正在尝试对 javascript 变量进行样式填充颜色。我必须在 SVG 代码的不同位置重用这个变量。

<path d="......."
id="path3950" 
style="fill:#c1e0b2;"/>

请帮我。

Answer 1

您是说您必须为 svg 中的不同路径重用样式填充？

javascript 变量不会帮助您解决此问题，您要做的是跨多个路径使用 CSS 类规则。

    <path d="......." class="myPaths" id="path3950"/>
    <path d="......." class="myPaths" id="path3951"/>
    <path d="......." class="myPaths" id="path3952"/>

    //in css, either by linking a file at the top of the svg
    //     or with 
    <style type="text/css" >
       <![CDATA[
            .myPaths {
                fill: #c1e0b2;
            }   
        ]]>
    </style>

并且 CSS 填充将应用于它们。

Answer 2

您可以通过此代码在 javascript 中获取内联 css 值。

var p = document.getElementById("path3950");  
var fill_color = p.style.getPropertyValue("fill");  

fill_color将是“ #c1e0b2”。