Javascript 尝试使用onclick事件更改svg的颜色。它说它不能指定颜色，因为它不够精细

这是我的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>

它不会改变颜色，所以我想知道是否有人知道我在这方面出了什么问题

---

谢谢大家!

不能仅引用头发元素。相反，调用document.getElementById（'hair'）来获取它

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

按钮

---

这是一把小提琴，你可以看到它在

中起作用。你不能只引用头发元素。相反，调用document.getElementById（'hair'）来获取它

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

按钮

---

这是一把小提琴，你可以看到它在

中工作。你有两个SVG对象，它们具有相同的id

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>

---

正在工作

您有两个具有相同id的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>

工作