Add id and data-symbol Attributes to <text> Elements Representing Symbols

[2mx]

To enable easier DOM selection and interactivity (e.g. hover, click) with JavaScript, it would be useful to add an id and a data-symbol attribute to all elements representing symbols such as planets (Sun, Moon…), signs (Aries, Taurus…), and houses (House 1, House 2…).

Suggested Implementation

The SVGUtils::SVGText method could be updated as follows to accept and apply custom attributes:

static SVGText(x, y, txt, attributes = {}) {
    const text = document.createElementNS(SVGUtils.SVG_NAMESPACE, "text");

    // Basic required attributes
    text.setAttribute("x", x);
    text.setAttribute("y", y);
    text.setAttribute("stroke", "none");

    // Optional additional attributes
    for (const [key, value] of Object.entries(attributes)) {
        text.setAttribute(key, value);
    }

    // Text content
    text.appendChild(document.createTextNode(txt));

    return text;
}

Then, symbol elements like this one could use these attributes:

function sunSymbol(xPos, yPos) {
    return SVGUtils.SVGText(xPos, yPos, SVGUtils.SYMBOL_SUN_CODE, {
        "data-symbol": SVGUtils.SYMBOL_SUN,
        "id": "symbol-" + SVGUtils.SYMBOL_SUN
    });
}

Additional Consideration

There should also be a strategy to distinguish between symbols from the radix chart and those from the transit chart, either by:

• Using a prefix or suffix in the id (e.g. id="radix-symbol-sun" vs. id="transit-symbol-sun")
• Or adding an additional attribute (e.g. data-chart="radix" or data-chart="transit")