這是我的 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 事件將頭發(fā)更改為藍色： <button class="blueButton" onclick="hair.style.fill='blue';"></button>它不會改變顏色，所以我想知道是否有人知道我哪里出了問題......謝謝你！
2 回答
哈士奇WWW
TA貢獻1799條經驗 獲得超6個贊
您不能只引用頭發(fā)元素。相反，調用 document.getElementById('hair') 來獲取它。
<button class="blueButton" onclick="document.getElementById('hair').style.fill='blue';">Button</button>這是一個小提琴，您可以在https://jsfiddle.net/679nLv3p/中看到它的工作原理
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
您有兩個具有相同 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>
工作jsbin 示例
- 2 回答
- 0 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消