javascript - 如何使用普通 JavaScript 更改此 SVG Sprite 的 href？

Question

我正在使用 SVG sprite 表，我正在尝试使用 vanilla javascript 更改 svg 的 href，但在研究解决方案后，遇到了障碍。

html

let scores, roundScore, activePlayer, dice, diceSvg, diceImg, diceHrefString;

scores = [0,0];
roundScore = 0;
activePlayer = 0;

document.querySelector(`#p${activePlayer}c-score`).textContent = dice;
diceSvg = document.getElementById("dice-icon");
diceSvg.style.display = "none";

document.getElementById("roll-dice").addEventListener("click",function(){
	dice = Math.floor(Math.random() * 6) + 1;
	diceImg = document.querySelector(".dice-icon");
    diceHrefString = `dice_sprite_sheet.svg#dice-${dice}`;
    if(dice !== 0){
        diceImg.setAttributeNS("xlink:","href",diceHrefString);
    }else{
    	diceImg.setAttributeNS("xlink:","href","dice");
    }
        diceSvg.style.display = "block";
});

<svg class="dice-icon" id="dice-icon">
				<use xlink:href="dice_sprite_sheet.svg#dice"></use>
</svg>

Answer 1

正如我所说:您需要使用 svg xlink 命名空间:http://www.w3.org/1999/xlink。当您动态更改 xlink:href 的值时，您可以这样做:theUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#theId');

这是一个例子:

const SVG_XLINK = "http://www.w3.org/1999/xlink";
theUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#spade');

svg{border:1px solid}

<svg class="dice-icon" id="dice-icon" viewBox="0 0 20 20" width="200" height="200">
				<use id="theUse" xlink:href="#heart"></use>
</svg>


<svg width="0" height="0" display="none">
<title>symbols defs</title>
<defs>
<symbol viewBox="0 0 20 20" id="spade" style="overflow: visible">
<title>Spade</title>
<path d="M9,15C9,20 0,21 0,16S6,9 10,0C14,9 20,11 20,16 S11,20 11,15Q11,20 13,20H7Q9,20 9,15Z"/>
</symbol>

<symbol viewBox="0 0 20 20" id="heart" style="overflow: visible">
<title>heart</title>
<path d="M10,6 Q10,0 15,0T20,6Q20,10 15,14 T10,20Q10,18 5,14T0,6Q0,0 5,0T10,6Z"/>
</symbol>
</defs>
</svg>

希望对你有帮助。