Feat : prevent isolation by removing <use> elements

output/heron/080.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card80">
+     width="298" height="417" viewBox="0 0 298 417" id="card80" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -13,24 +13,6 @@
 <filter id="drop-shadow">
 <feDropShadow dx="1" dy="1" stdDeviation="0"></feDropShadow>
 </filter>
-<g id="faction_icon">
-<circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
-<circle cx="0" cy="0" r="20" fill="url(#grad2)" />
-</g>
-<g id="d0">
-<text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre Couteau</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
-</g>
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
-<text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
-</g>
-<g id="d2">
-<use xlink:href="#d0" x="137.0" y="101.5" />
-<use xlink:href="#d1" x="137.0" y="60.5" />
-</g>
-<g id="effects">
-<use xlink:href="#d2" x="0" y="0" />
-</g>
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
@@ -41,8 +23,25 @@
 <text x="149.0" y="36" font-size="19" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">Throwing Knife</text>
 <text x="149.0" y="53" font-size="13" text-anchor="middle" fill="black" font-family="Helvetica">item</text>
 </g>
-<use xlink:href="#faction_icon" x="36" y="37" />
+<g transform="translate(36,37)">
+<g id="faction_icon">
+<circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
+<circle cx="0" cy="0" r="20" fill="url(#grad2)" />
+</g>
+</g>
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
-<use xlink:href="#effects" x="12" y="265" />
+<g transform="translate(12,265)">
+<g>
+<g transform="translate(137.0,101.5)">
+<text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre Couteau</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
+</g>
+<g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
+<text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
+</g>
+</g>
+</g>
+</g>
 </svg>