Попытка изменить цвет SVG с помощью события onclick. Он говорит, что не может назначить цвет, потому что его недостаточно

Question

вот мой svg-файл, это просто лицо, на котором я тренируюсь

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 720 720" style="enable-background:new 0 0 720 720;" xml:space="preserve">

    <g id="skin">
        <circle class="skin" cx="364.42" cy="383" r="278"/>
    </g>
    <g id="mouth">
        <path class="mouth" d="M172.92,383c127.67,0,255.33,0,383,0c0,105.05-86.45,191.5-191.5,191.5S172.92,488.05,172.92,383z"/>
    </g>
    <g id="hair">
        <path id = "hair" class = "hair" d="M107.4,276.86c-2.76-50.59,10.76-81.24,24.2-100.13C189.57,95.31,331.92,112,341.92,57.91
            c2.04-11.03-2.07-21.46-6.93-29.61c18.47-6.31,81.92-25.39,151.28,3.28c94.59,39.09,121.88,137.21,127.56,160.84
            c7.93,32.98,7.18,61.32,5.46,79.42c-38.79-64.73-78.17-85.57-107.42-92.42c-43.32-10.15-60.72,11.26-139.64,11.71
            c-67.77,0.39-78.13-15.27-119.49-10.14C216.75,185.45,165.19,204.69,107.4,276.86z"/>
    </g>
    <g id="eyes">
        <g>
            <circle class = "eyes" cx="251.17" cy="271.25" r="52.4"/>
            <circle class = "eyes" cx="477.67" cy="271.25" r="52.4"/>
        </g>
    </g>
    </svg>

Я пытаюсь изменить цвет волос на синий, используя кнопку и событие onclick здесь:

    <button class="blueButton" onclick="hair.style.fill='blue';"></button>

это не меняет цвет, поэтому мне было интересно, если кто-нибудь знает, где я не так с этим ...

Спасибо!

Answer 1

У вас есть два объекта SVG с одинаковым идентификатором hair. Удалить группу один.

<g>
    <path id = "hair" class = "hair" d="M107.4,276.86c-2.76-50.59,10.76-81.24,24.2-100.13C189.57,95.31,331.92,112,341.92,57.91
        c2.04-11.03-2.07-21.46-6.93-29.61c18.47-6.31,81.92-25.39,151.28,3.28c94.59,39.09,121.88,137.21,127.56,160.84
        c7.93,32.98,7.18,61.32,5.46,79.42c-38.79-64.73-78.17-85.57-107.42-92.42c-43.32-10.15-60.72,11.26-139.64,11.71
        c-67.77,0.39-78.13-15.27-119.49-10.14C216.75,185.45,165.19,204.69,107.4,276.86z"/>
</g>

Рабочий jsbin пример

Answer 2

Вы не можете просто ссылаться на элемент волос. Вместо этого вызовите document.getElementById ('hair'), чтобы получить его.

<button class="blueButton" onclick="document.getElementById('hair').style.fill='blue';">Button</button>  

Вот скрипка, которую вы можете видеть, как она работает в https://jsfiddle.net/679nLv3p/