問題

私はSVGスプライトシートを使用しており、バニラの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> 

  ベストアンサー

私がコメントしたように:あなたはsvg xlink名前空間を使用する必要があります:http://www.w3.org/1999/xlinkxlink: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> 

私はそれが助けてくれることを願っています。

  同じタグがついた質問を見る

javascriptsvg