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 "width" attribute of the "my-rect" rectangle individually for each of the shapes with javascript. Using the id "my-rect" will change the width of both rectangles, but I want to change only one.

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.

<svg height="1000" width="1000">
  <a transform="translate(110,110)">
    <g id="my-group">
      <g>
        <circle r="100" fill="#0000BF" stroke="black" stroke-width="2" fill-opacity="0.8"></circle>
      </g>
      <g>
        <rect id="my-rect" y="-50" height="100" x="-50" width="50">
        </rect>
      </g>
    </g>
  </a>
  <use xlink:href="#my-group" x="340" y="110"/>
</svg>

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 "width" attribute of the "my-rect" rectangle individually for each of the shapes with javascript. Using the id "my-rect" will change the width of both rectangles, but I want to change only one.

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.

<svg height="1000" width="1000">
  <a transform="translate(110,110)">
    <g id="my-group">
      <g>
        <circle r="100" fill="#0000BF" stroke="black" stroke-width="2" fill-opacity="0.8"></circle>
      </g>
      <g>
        <rect id="my-rect" y="-50" height="100" x="-50" width="50">
        </rect>
      </g>
    </g>
  </a>
  <use xlink:href="#my-group" x="340" y="110"/>
</svg>

• javascript
• html
• svg
• code-reuse

4 Answers 4

Sean said:

If the Web Components Custom Elements gets expanded to the SVG namespace,
more plex reuse will be possible

Which is true, you can't make custom SVG elements (yet).

But you can make a native JavaScript Web Component (JSWC) that generates SVG:

customElements.define("rect-in-circle", class extends HTMLElement{
  connectedCallback(){
    const a = x => this.getAttribute(x);
    this.innerHTML=`<svg viewBox="-100 -100 100 100">`+
                   `<g transform="translate(-50 -50)">`+
                     `<circle r="50" fill="#123456AB"/>`+
                     `<rect y="${a("y")}" height="${a("height")}"`+
                           `x="${a("x")}"  width="${a("width" )}"/>`+
                   `</g></svg>`
  }
});

svg{
  width:100px;
  height:100px;
  background:grey;
  fill:green;
}

<rect-in-circle x=-10 y=-10 width=20 height=20></rect-in-circle>
<rect-in-circle x=-40 y=-20 width=10 height=40></rect-in-circle>
<rect-in-circle x= 10 y= 20 width=30 height= 5></rect-in-circle>

Custom Elements for SVG are a modern solution to many oldskool SVG hacks

Update

If OP wants one SVG with circles, we can use shadowDOM and the fact that elements inside lightDOM are not displayed. We can even use undefined <rect> elements (in the HTML namespace) so we can easily inject them in the SVG string.

<script>
  customElements.define("rects-in-circles", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        const rects = [...this.children];
        const width = rects.length * 100;
        this.attachShadow({
          mode: "open"
        }).innerHTML = `<svg viewBox='0 0 ${width} 100'>` + 
          rects.map((rect, idx) => `<g transform='translate(${50+100*idx} 50)'>` +
          `<circle r='50' fill='green'/>` +
          rect.outerHTML +
          `</g>`) + "</svg>";

      })
    }
  });

</script>

<rects-in-circles>
  <rect x=-10 y=-10 width=20 height=20></rect>
  <rect x=-40 y=-20 width=10 height=40></rect>
  <rect x=10 y=20 width=30 height=5></rect>
  <rect x=-40 y=-40 width=50 height=50></rect>
</rects-in-circles>

(my) Related StackOverflow answers: Custom Elements and SVG

With a bit of trickery, it is possible. You have to take advantage of CSS inheritance to get some property value inside a shadow element. In this case, it will be custom variables that will be used to scale and position the rectangle.

The markup has to be rewritten a bit for this. First, you write your group inside a <defs> element, making it a template for reuse, but not rendered by itself. Second, the rectangle is placed inside a nested <svg overflow="visible"> element. Giving this element the x/y coordinates and leaving them at 0 for the <rect> element makes it easier to track where the left side of the rectangle will end up after a transforming operation.

Now the width change of the rect is achieved with a scaleX() transformation plus a translate() for the position. This must be in CSS transform syntax. Using a transform attribute would not work (yet). Therefore, we also need a transform-origin property, set to the left side of the enclosing <svg> element.

Instead of writing a concrete value for the scaling, the value is expressed as a variable with the default value 1: var(--scale, 1); same for the positional values. The value for the variable is set in a style attribute for each <use> element separately: style="--scale:2;--posX:20px; --posY:-10px". Note the need for writing px units!

#my-rect {
    transform-origin: left top;
    transform: translate(var(--posX, 0), var(--posY, 0)) scaleX(var(--scale, 1));
}

<svg height="1000" width="1000">
  <defs>
    <g id="my-group">
      <g>
        <circle r="100" fill="#0000BF" stroke="black" stroke-width="2" fill-opacity="0.8"></circle>
      </g>
      <svg x="-50" y="-50" overflow="visible">
        <rect id="my-rect" height="100" width="50">
        </rect>
      </svg>
    </g>
  </defs>
  <use xlink:href="#my-group" x="110" y="110" style="--scale:1"/>
  <use xlink:href="#my-group" x="340" y="110" style="--scale:2;--posX:20px; --posY:-10px"/>
</svg>

This isn't possible. The use element creates a closed shadow root, which means its contents are inaccessible to JS. While you can set attributes of instances of the reused element individually (if they haven't been set on the original element) you won't be able to affect elements that are children of the reused element.

An alternative approach would be to reuse the rectangle and circle elements directly, and placing them in a new group.

The getAttribute method didn't work for me but this worked:

customElements.define("source-link", class extends HTMLElement {
    static get observedAttributes() {
        return ['href'];
    }

    get href() {
        return this.getAttribute('href');
    }

    set href(val) {
        if (val) {
            this.setAttribute('href', val);
        } else {
            this.removeAttribute('href');
        }
    }
    connectedCallback(){
        this.innerHTML= '<a href="' + this.href + '" target="_blank" title="source"><svg fill="#37f" viewBox="0 0 512 512" width="16"><g><path d="M488.727,0H302.545c-12.853,0-23.273,10.42-23.273,23.273c0,12.853,10.42,23.273,23.273,23.273h129.997L192.999,286.09    c-9.089,9.089-9.089,23.823,0,32.912c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L465.455,79.458    v129.997c0,12.853,10.42,23.273,23.273,23.273c12.853,0,23.273-10.42,23.273-23.273V23.273C512,10.42,501.58,0,488.727,0z"/></g><g><path d="M395.636,232.727c-12.853,0-23.273,10.42-23.273,23.273v209.455H46.545V139.636H256c12.853,0,23.273-10.42,23.273-23.273    S268.853,93.091,256,93.091H23.273C10.42,93.091,0,103.511,0,116.364v372.364C0,501.58,10.42,512,23.273,512h372.364    c12.853,0,23.273-10.42,23.273-23.273V256C418.909,243.147,408.489,232.727,395.636,232.727z"/></g></svg></a>';
    }
});

Usage:

<source-link href="//google."></source-link>

Source :D