How to get fill attribute from a svg element?

Question

Here is the innerHTML of the SVG element. How can I get the fill attribute list of this string?

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

Or is there any possibility (Method/function) to get the fill attribute of the svg element

you should probably add more code to show this. Show the markup where you SVG is found in your html document if you are doing that, if you are trying to get the fill attribute with a script inside the svg specify that etc. etc. Describe in more detail what you want . — user254694, Jan 24 '20 at 14:22

Yevhen Horbunkov · Answer 1 · 2020-01-24T15:31:56.567

There's no need for RegExp whatsoever. Simple document.getElementsBy... methods may grab all the necessary DOM elements by their common feature (should it be tagname, class, whatever), if you need more complex query, involving class names, id's or parent-child relations, you may use document.querySelectorAll().

Then, you may use getAttribute('fill') to extract corresponding attribute values.

Below example fetches elements by <path> tag name:

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>

To grab all children of certain <g> element, identified by id, you may go, like:

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>

Thank you . It is working only for path . How can I get fill attribute If the svg is combination of different tags like rect,polygon,circle etc ? — karma rout, Jan 24 '20 at 14:40
You may use `querySelectorAll('path,rect,polygon,circle')` to fetch only certain types of shapes, or (if all child nodes of element with certain `id` are needed (e.g. of ``), you may do `querySelectorAll('#xe_vtw0 *') type of thing. Optimal query would depend on your exact source svg structure. — Yevhen Horbunkov, Jan 24 '20 at 14:48

How to get fill attribute from a svg element?

1 Answers1