Change the color of an SVG element using javascript

Posted by: 邱小新 at 下午4:01:00 in
  • How can I Change the color of an SVG element, through JS??
  • Changing SVG image color with javascript
  • 在 Hover 時更改 SVG 顏色的幾種方式
  • 這個方法可以手動變更 SVG,但是 link 會出錯。
    <a href="javascript:"
    	onmouseover="document.wizard.getSVGDocument().getElementsByTagName('path')[0].style.stroke='white'"
    	onmouseout="document.wizard.getSVGDocument().getElementsByTagName('path')[0].style.stroke=''">
    <object name="wizard" type="image/svg+xml" data="svg/wizard.svg" style="pointer-events: none;"></object>
    </a>
    
  • 這個方法 link 可以正常使用,但是要準備二個 SVG 圖片。
    <a href="javascript:">
    <img width="28" height="28" src="svg/wizard.svg"
    	onmouseenter="this.src='svg/wizard1.svg'"
    	onmouseleave="this.src='svg/wizard.svg'">
    </a>