Bonjour,

je souhaie dupliquer ce SVG dans une page web

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="20" viewBox="0 0 100 20"> 
	<defs>
		<linearGradient id="MyGradient">
			<stop id="pourcentGold" offset="55%"  stop-color="gold"/>
			<stop  id="pourcentGrey" offset="45%" stop-color="grey"/>
		</linearGradient>
	</defs>

	<polygon id ="1" points="10,1 4,19.8 19,7.8 1,7.8 16,19.8" fill="gold" /> 
	<polygon id ="2" points="30,1 24,19.8 39,7.8 21,7.8 36,19.8" fill="gold" />
	<polygon id ="3" points="50,1 44,19.8 59,7.8 41,7.8 56,19.8" fill="url(#MyGradient)"/>
	<polygon id ="5" points="70,1 64,19.8 79,7.8 61,7.8 76,19.8"  fill="grey" />
	<polygon id ="4" points="90,1 84,19.8 99,7.8 81,7.8 96,19.8" fill="grey"/> 
</svg>

Pour cela j'ai mis dans ma page des balises "span" identifiable par une classe

<span class="etoile" style="float: right; display:none">4.5</span>
<span class="etoile" style="float: right; display:none">2</span>
<span class="etoile" style="float: right; display:none">3.7</span>
<span class="etoile" style="float: right; display:none">2.5</span>

 et un code qui recupère la valeur du span pour dupliquer le SVG puis le modifier selon le texte du span

function creatSVG(afterElm){//pour ajouter une balise objet après la balise html afterElm
	var svg = document.createElement("object")
	svg.data ="./images/mon.svg";
   	svg.type ="image/svg+xml";
	svg.style ="display: inline;float: right;width:30%";
	var embed = document.createElement("embed")
	embed.src ="./images/mon.svg";
	embed.type ="image/svg+xml";
	embed.style ="display: inline;float: right;";
	svg.append(embed);
	afterElm.after(svg);
	return svg
}
for(var i=0; i <$("span.etoile").length; i++){ //pour modifier la couleur des etoiles
    var spanValue = $("span.etoile")[i].innerHTML;
	var svg = creatSVG($("span.etoile")[i]);
	var svgContent = svg.contentDocument;
    //*
	try{
		console.log("etoile :",svgContent)
		for(j=1; j<6; j++){
			console.log("etoile :",j)
			var etoile = svgContent.getElementById(j);
			console.log("etoile :",etoile)
			var valueEtoile=spanValue - j-1
			if(valueEtoile>=1){  //la partie entière de span.innerHTML >id de l'etoile
				etoile.style.fill = "gold";
			}else if(valueEtoile>0){
                        //la partie entière de span.innerHTML = id de l'etoile mais span.innerHTML s un nombe décimale 
				svgContent.getElementById("pourcentGold").offset = valueEtoile*100+"%"
				svgContent.getElementById("pourcentGrey").offset =(1 - valueEtoile)*100+"%"
				etoile.style.fill = "url(#MyGradient)";
				
			}else {
			etoile.style.fill = "grey";
			}
			console.log("////////////////",i, "->",j, spanValue, "->",etoile)
		}
	}catch{
		console.log("etoile :",svg)
		console.log(i, "->", $("span.etoile")[i].innerHTML, "->",$("#"+i))
	}
    /**/
}

Bonjour H.BOUDAOUD,

C'est quoi ton problème?

Bonjour H.BOUDAOUD,

Un exemple :

https://codepen.io/Zonecss/pen/MMLrgw

Merci,

maintenant, je dois essayer de comprendre votre code

cordialement