Question

嗨，我试图在我的svg上将某个类属于当前或活动属性：实际上只在小蓝圈上：

		<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
            <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249" cy="248" r="200"/>
            <circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249" cy="47.667" r="5"/>
            <circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="449" cy="247.667" r="5"/>
            <circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249" cy="447.667" r="5"/>
            <circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="49" cy="247.667" r="5"/>
            <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249" cy="248" r="200"/>
			<a xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249" cy="47.667" r="5"/></a>
            <a xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="449" cy="247.667" r="5"/></a>
            <a xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249" cy="447.667" r="5"/></a>
            <a xlink:href="#4thpage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="49" cy="247.667" r="5"/></a>
	
            </svg>

Answer 1

document.getElementById("smallblueleft").setAttribute("class", "whateverClassYouWantToApply");

这将适用于您当前的代码，因为您没有在该元素上设置其他类。如果您确实设置了其他类，则此语句将删除其他类。为了避免这种影响，您可以在大多数浏览器中将新类添加到现有集合中（但不是早于版本10的Internet Explorer）：

document.getElementById("smallblueleft").classList.add("whateverClassYouWantToApply");

如何在svg上使用属性类js

1 个答案: