CODEWITHSUNDEEP
javascriptjquerysvg
Etienne Guay
Etienne Guay

Reputation: 13

How to get the actual svg fill attribute using javascript or jquery

I'm able to change fill attribute of an SVG rectangle with jQuery when I click on it.

But how can I get the actual fill attribute of this rectangle?

Here is my try:

$(document).ready(function () {
    var svg = $('#test_svg').find('#rect10')[0];
    $("#test_button").click(function(){
        console.log(svg.getAttribute('style'));
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test_svg" class="MusiopolisImages scaling-svg-container">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
        id="svg8"
        version="1.1"
       
        class="scaling-svg" 
        viewBox="0 0 300 320" 
        height="200" 
        width="200">
        <g
            id="layer1"
            inkscape:groupmode="layer"
            inkscape:label="Calque 1">
            <rect
                y="100.54166"
                x="26.458334"
                height="69.547623"
                width="77.863091"
                id="rect10"
                style="fill:#ffffff;stroke-width:2;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
            />
        </g>
    </svg>
</div>
<button id="test_button">Show rect10 fill attribute</button>

Edit: With this try I get the whole actual style of element #rect10 ("fill:#ffffff;stroke-width:2;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none").

I'm so close! How can I get the fill attribute only?

Upvotes: 1

Views: 720

Answers (1)

David Rissato Cruz
David Rissato Cruz

Reputation: 3637

You need to use the style attribute of the DOM Element:

example: alert(svg.style.fill)

Upvotes: 2

Related Questions