HTML SVG reuse a group with and change attributes of inner elements individually for each instance

Question

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.

user_2520800 · Answer

Sean said:

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

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

But you can make a Custom Element that generates SVG:

customElements.define("rect-in-circle", class extends HTMLElement{
  connectedCallback(){
    const a = x => this.getAttribute(x);
    this.innerHTML=``
  }
});

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

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 elements (in the HTML namespace) so we can easily inject them in the SVG string.

(my) Related StackOverflow answers: Custom Elements and SVG

user_4996779 · Answer

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 element, making it a template for reuse, but not rendered by itself. Second, the rectangle is placed inside a nested element. Giving this element the x/y coordinates and leaving them at 0 for the 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 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 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));
}

user_5351721 · Answer

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.

user_7580839 · Answer

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= '';
    }
});

Usage:

Source :D

HTML SVG reuse a group <g> with <use> and change attributes of inner elements individually for each instance

4 Answers

Update