Addressing elements within groups (i.e. if exporting diagrams from DrawIO)

[dktcl]

Hi - great work on this project - thanks to all involved! I can add text to existing diagrams (via the embedded editor) and update values to create dynamic plant diagrams.

Apologies in advance for mangling CSS terminology. I'm a lowly controls engineer - web technologies are a dark art!

One stumbling block I'm having is when trying to edit elements within SVG groups, for example:

<g id="cell-T4InbBNdmoivdjFQ9MVg-1">
      <rect x="0" y="290" width="120" height="90" fill="#f5f5f5" stroke="#666666" pointer-events="none" />
      <g transform="translate(-0.5 -0.5)">
        <switch>
          <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 297px; margin-left: 1px;">
              <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Grid Supply<br />
                  <font style="font-size: 10px">(To Test Rig DB)</font>
                </div>
              </div>
            </div>
          </foreignObject><text x="60" y="309" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">Grid Supply...</text>
        </switch>
      </g>
    </g>

I use DrawIO (the desktop version of diagrams.net) to create plant diagrams. Unfortunately, even a simple text box is embedded within hierarchy of groups.

How do I access the the text (or other properties) within a hierarchy of groups?

Note: DrawIO annoyingly does not let you customise element id's... hence the long strings.

Thanks in advance for your help!

Dave

[Steve-Mcl]

You can try modifying the src SVG (in the source tab) after you paste it in. Try adding an ID to the element you want to animate e.g...

                <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Grid Supply<br />
                  <font id="textbox1" style="font-size: 10px">(To Test Rig DB)</font>
                </div>

then use the selector #textbox1 in your animations / bindings.

---

Alternatively, change to using an alternative SVG editor that permits entering ID.

[dktcl]

Thanks @Steve-Mcl - that makes sense.

For now, I can use your approach, or save DrawIO as png, then overlay text in embedded drawSVG editor.

In the long term, however, it looks like I need to find another SVG editor that will support a range of engineering shapes. Any recommendations welcome and gratefully received!

[Steve-Mcl]

No bother.

As for which editor, you'll have to try them out, but I'm pretty sure the very capable (and free) inkscape permits entering id.