Bonjour !

Suite à des recherches non fructueuse sur internet concernant mon problème, j'en appelle à vous

J'ai un fichier svg, qui contient un "body" (pour être précis il s'agit d'un path avec une couleur en fond), et une rayure (un rectangle). J'utilise clip-path pour que mon rectangle ne dépasse pas du body.

Cependant, alors que mon code marchait autrefois sous Chrome, il ne fonctionne plus ! Le rectangle se retrouve derrière le body, alors qu'il devrait tout simplement être clippé !

Mon svg s'affiche correctement sous FX et safari. Auriez vous une petite idée du problème? S'agit t'il peut être d'un bug venant d'une mise à jour de Chrome ?

NB: J'ai déjà trouvé une solution temporaire à mon problème, mais j'aimerais éviter d'avoir à modifier mon code, car j'ai déjà plein d'image qui ont cette structure de code. Ma solution consistait à remplacer dans le clip-path : au lieu de mettre l'id, je le remplaçais directement par le path complet... Mais faire cela ne m'arrange pas.

Voici le code de l'image svg (j'ai simplifier autant que j'ai pu ^^):
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="FootballKit" width="175px" height="140px" version="1.1" viewBox="3 -2 175 140">
 
		<clipPath id="SVGID_body">
			<use xlink:href="#body" overflow="visible"/>
		</clipPath>
 
		<path id="body" style="fill: #123456; stroke: none; stroke-width: 0" d="M38.367,130.146c33.961,4.151,67.953,4.151,101.915,0c-0.012-19.271-0.032-79.213-0.032-79.213c-5.617-15.046-8.412-30.249-8.384-45.608H46.863c0.029,15.359-2.766,30.562-8.383,45.608C38.48,50.933,38.381,106.046,38.367,130.146z"/>
		<rect clip-path="url(#SVGID_body)" style="fill: #000000" width="14.313" height="129" x="113.219" y="4"/>
 
</svg>
Merci d'avance pour toutes vos réponses !