如何从 svg 元素获取填充属性？ [复制]答案

【问题标题】：How to get fill attribute from a svg element? [duplicate]如何从 svg 元素获取填充属性？ [复制]
【发布时间】：2020-02-28 03:53:45
【问题描述】：

这里是 SVG 元素的 innerHTML。如何获取该字符串的填充属性列表？

<g id="xe_gbfh">
    <g id="xe_vtw0">
        <path fill="#B05027" d="M342.9356973876953,318.4777802734375 L310.37669738769534,317.72978027343754 L398.6596973876953,187.1957802734375 L355.43469738769534,287.9407802734375 L382.9036973876953,297.85778027343747 L281.1486973876953,447.2157802734375 L342.9356973876953,318.4777802734375 zM324.2986973876953,313.31478027343746 L354.2746973876953,312.19178027343753 L321.9786973876953,379.96578027343753 L376.31869738769535,300.9647802734375 L345.2936973876953,295.98778027343747 L366.5136973876953,243.5947802734375 L324.2986973876953,313.31478027343746 z" id="xe_0sxb"></path>

        <polygon fill="#E98524" points="324.29869079589844,313.3147888183594 366.5137023925781,243.59378051757812 345.2926940917969,295.9867858886719 376.3177032470703,300.9637756347656 321.97769927978516,379.96575927734375 354.2747039794922,312.1918029785156 " id="xe_68zg"></polygon>

        <path fill="#F7F193" d="M285.15369738769533,262.3057802734375 C301.5456973876953,245.9387802734375 321.3176973876953,237.7557802734375 344.4706973876953,237.7557802734375 C350.956697387602734375 344.4706973876953,405.4867802734375 C333.34369738769533,405.4867802734375 323.00169738769534,403.6027802734375 313.4466973876953,399.8367802734375 L382.9046973876953,297.85778027343747 L355.43469738769534,287.9407802734375 L374.66969738769535,243.1077802734375 C385.32369738769535,247.1737802734375 395.01669738769533,253.5737802734375 403.7496973876953,262.3057802734375 z" id="xe_94d4"></path>

        <path fill="#672E1D" d="M281.26169738769534,260.0977802734375 C290.7676973876953,250.9167802734375 301.3456973876953,244.23078027343752 312.9966973876953,240.0387802734375 C322.75169738769534,236.52078027343748 333.2676973876953,234.7617802734375 344.54469738769535,234.7617802734375 C351.6816973876953,234.7617802734375 35953,397.2917802734375 403.7476973876953,380.9007802734375 C420.1386973876953,364.5337802734375 428.3346973876953,344.7737802734375 428.3346973876953,321.6217802734375 C428.3346973876953,298.46878027343746 420.1386973876953,278.6967802734375 403.7476973876953,262.3067802734375 C395.01569738769535,253.5747802734375 385.3216973876953,247.1747802734375 374.6686973876953,243.1077802734375 L376.0176973876953,240.0017802734375 C376.0426973876953,240.0257802734375 376.0676973876953,240.0387802734375 376.09369738769533,240.0387802734375 z" id="xe_sc91"></path>
    </g>
</g>

或者有没有可能（方法/函数）获取svg元素的填充属性

【问题讨论】：

您可能应该添加更多代码来显示这一点。如果您这样做，则显示您在 html 文档中找到 SVG 的标记，如果您尝试使用 svg 中的脚本获取填充属性，请指定等等。更详细地描述您想要的内容。

标签： javascript

【解决方案1】：

不需要任何正则表达式。简单的document.getElementsBy... 方法可以通过它们的共同特征（应该是标记名、类等）获取所有必要的 DOM 元素，如果您需要更复杂的查询，涉及类名、id 或父子关系，您可以使用@987654322 @。

然后，你可以使用getAttribute('fill')来提取对应的属性值。

下面的例子通过<path>标签名获取元素：

const fillColors = [...document.getElementsByTagName('path')].map(path => path.getAttribute('fill'))

console.log(fillColors)

svg {max-width:50px;}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="red" d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="green" d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="blue" d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>

要获取由id 标识的某个<g> 元素的所有子元素，您可以这样做：

const fillColors = [...document.getElementById('xe_vtw0').children].map(child => child.getAttribute('fill'))

console.log(fillColors)

<g id="xe_vtw0">
<path fill="#B05027" d="M342.9356973876953,318.4777802734375 L310.37669738769534,317.72978027343754 L398.6596973876953,187.1957802734375 L355.43469738769534,287.9407802734375 L382.9036973876953,297.85778027343747 L281.1486973876953,447.2157802734375 L342.9356973876953,318.4777802734375 zM324.2986973876953,313.31478027343746 L354.2746973876953,312.19178027343753 L321.9786973876953,379.96578027343753 L376.31869738769535,300.9647802734375 L345.2936973876953,295.98778027343747 L366.5136973876953,243.5947802734375 L324.2986973876953,313.31478027343746 z" id="xe_0sxb"></path>

<polygon fill="#E98524" points="324.29869079589844,313.3147888183594 366.5137023925781,243.59378051757812 345.2926940917969,295.9867858886719 376.3177032470703,300.9637756347656 321.97769927978516,379.96575927734375 354.2747039794922,312.1918029785156 " id="xe_68zg"></polygon>

<path fill="#F7F193" d="M285.15369738769533,262.3057802734375 C301.5456973876953,245.9387802734375 321.3176973876953,237.7557802734375 344.4706973876953,237.7557802734375 C350.956697387602734375 344.4706973876953,405.4867802734375 C333.34369738769533,405.4867802734375 323.00169738769534,403.6027802734375 313.4466973876953,399.8367802734375 L382.9046973876953,297.85778027343747 L355.43469738769534,287.9407802734375 L374.66969738769535,243.1077802734375 C385.32369738769535,247.1737802734375 395.01669738769533,253.5737802734375 403.7496973876953,262.3057802734375 z" id="xe_94d4"></path>

<path fill="#672E1D" d="M281.26169738769534,260.0977802734375 C290.7676973876953,250.9167802734375 301.3456973876953,244.23078027343752 312.9966973876953,240.0387802734375 C322.75169738769534,236.52078027343748 333.2676973876953,234.7617802734375 344.54469738769535,234.7617802734375 C351.6816973876953,234.7617802734375 35953,397.2917802734375 403.7476973876953,380.9007802734375 C420.1386973876953,364.5337802734375 428.3346973876953,344.7737802734375 428.3346973876953,321.6217802734375 C428.3346973876953,298.46878027343746 420.1386973876953,278.6967802734375 403.7476973876953,262.3067802734375 C395.01569738769535,253.5747802734375 385.3216973876953,247.1747802734375 374.6686973876953,243.1077802734375 L376.0176973876953,240.0017802734375 C376.0426973876953,240.0257802734375 376.0676973876953,240.0387802734375 376.09369738769533,240.0387802734375 z" id="xe_sc91"></path>

</g>

【讨论】：

谢谢。它仅适用于 path 。如果 svg 是矩形、多边形、圆形等不同标签的组合，我如何获得填充属性？
您可以使用querySelectorAll('path,rect,polygon,circle') 仅获取特定类型的形状，或者（如果需要具有特定id 的元素的所有子节点（例如<g id="xe_vtw0">），您可以执行`querySelectorAll ('#xe_vtw0 *') 类型的事物。最佳查询将取决于您的确切源 svg 结构。