title: HTML SVG reuse a group <g> with <use> and change attributes of inner elements individually for each instance
body: <p>So i'd like to reuse a grouped svg shape and change one attribute of one of the elements inside of the group individually for each instance.
  The following simplified example creates a second circle with a rectangle inside. I now want to change the &quot;width&quot; attribute of the &quot;my-rect&quot; rectangle individually for each of the shapes with javascript. Using the id &quot;my-rect&quot; will change the width of both rectangles, but I want to change only one.</p>
  <p>My goal (if my approach is nonsense): I have to draw multiple of these shapes and the only thing that differs is the position and the width of the rectangle.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="1000" width="1000"&gt;
    &lt;a transform="translate(110,110)"&gt;
      &lt;g id="my-group"&gt;
        &lt;g&gt;
          &lt;circle r="100" fill="#0000BF" stroke="black" stroke-width="2" fill-opacity="0.8"&gt;&lt;/circle&gt;
        &lt;/g&gt;
        &lt;g&gt;
          &lt;rect id="my-rect" y="-50" height="100" x="-50" width="50"&gt;
          &lt;/rect&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/a&gt;
    &lt;use xlink:href="#my-group" x="340" y="110"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>