Как получить стиль по классу в SVG?

318

27 декабря 2017, 22:38

Испробовал много разных способов получения стиля, в первую очередь пытался использовать getComputedStyle(), но это не помогает, вот допустим есть svg, в нем есть, допустим, polygon у которого есть какой-то класс. Надо узнать значение fill и stroke.

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 89.55 82.69"
     class="svg svg-gradient replaced-svg">
    <defs>
        <style>
            .cls-1,.cls-2{fill:none;stroke:#153e4c;stroke-width:2px;}.cls-1{stroke-linejoin:bevel;}.cls-2{stroke-miterlimit:10;}
        </style>
    </defs>
    <g id="Layer_1-2" data-name="Layer 1-2">
        <polygon class="cls-1" points="44.78 49.9 73.13 35.71 44.78 21.53 16.41 35.71 44.78 49.9"></polygon>
        <polygon class="cls-1" points="16.41 35.71 44.78 21.53 30.59 14.44 2.23 28.62 16.41 35.71"></polygon>
        <polygon class="cls-1" points="44.78 81.8 16.41 67.62 16.41 35.71 44.78 49.9 44.78 81.8"></polygon>
        <polygon class="cls-1" points="44.78 81.8 73.13 67.62 73.13 35.71 44.78 49.9 44.78 81.8"></polygon>
        <polygon class="cls-2" points="58.95 56.98 87.32 42.8 73.13 35.71 44.78 49.9 58.95 56.98"></polygon>
        <polygon class="cls-2" points="30.59 56.98 2.23 42.8 16.41 35.71 44.78 49.9 30.59 56.98"></polygon>
        <polygon class="cls-1" points="73.13 35.71 44.78 21.53 58.95 14.44 87.32 28.62 73.13 35.71"></polygon>
        <polygon class="cls-1" points="44.78 20.92 65.33 10.82 44.78 0.9 24.21 10.82 44.78 20.92"></polygon>
        <polygon class="cls-1" points="44.78 44.4 24.21 33.52 24.21 10.82 44.78 21.88 44.78 44.4"></polygon>
        <polygon class="cls-1" points="44.78 44.4 65.33 33.52 65.33 10.82 44.78 21.88 44.78 44.4"></polygon>
    </g>
</svg>

Получить надо с помощью JS.

Answer 1

Вы можете использовать window.getComputedStyle()

elem = document.querySelector('.cls-1'); 
style = getComputedStyle(elem); 
console.log(style.stroke);

<div class="wrapper"> 
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 89.55 82.69" 
     class="svg svg-gradient replaced-svg"> 
    <defs> 
        <style> 
            .cls-1,.cls-2{fill:none;stroke:#153e4c;stroke-width:2px;}.cls-1{stroke-linejoin:bevel;}.cls-2{stroke-miterlimit:10;} 
        </style> 
    </defs> 
    <g id="Layer_1-2" data-name="Layer 1-2"> 
        <polygon class="cls-1" points="44.78 49.9 73.13 35.71 44.78 21.53 16.41 35.71 44.78 49.9"></polygon> 
    </g> 
</svg> 
</div>