SVG set custom attributes or at least the id of an element

[gfoidl]

E.g. this code

using SvgSurface svg  = new("honeycomb.svg", 100, 100);
using CairoContext cr = new(svg);

cr.Rectangle(0, 0, 100, 100);
cr.Stroke();

using Hexagon hexagon = new(cr, 10);
cr.Translate(10, 10);
cr.LineWidth = 1;

cr.Color = KnownColors.LightGray;
cr.Paint();

for (int col = 0; col < 5; ++col)
{
    for (int row = 0; row < 5; ++row)
    {
        if (row % 2 != 0)
        {
            hexagon.Fill(col * 20 + 10, row * 20, KnownColors.LightGray);
            hexagon.Draw(col * 20 + 10, row * 20, KnownColors.Black);
        }
        else
        {
            hexagon.Fill(col * 20, row * 20, KnownColors.LightGray);
            hexagon.Draw(col * 20, row * 20, KnownColors.Black);
        }
    }
}

creates:

with the following SVG markup:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<rect x="-10" y="-10" width="120" height="120" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 10, 10)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 20, 30)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 10, 50)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 20, 70)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 10, 90)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 30, 10)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 40, 30)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 30, 50)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 40, 70)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 30, 90)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 50, 10)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 60, 30)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 50, 50)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 60, 70)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 50, 90)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 70, 10)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 80, 30)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 70, 50)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 80, 70)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 70, 90)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 90, 10)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 100, 30)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 90, 50)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 100, 70)"/>
<path fill-rule="nonzero" fill="rgb(82.745098%, 82.745098%, 82.745098%)" fill-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 0 -11.546875 L 10 -5.773438 L 10 5.773438 L 0 11.546875 L -10 5.773438 L -10 -5.773438 Z M 0 -11.546875 " transform="matrix(1, 0, 0, 1, 90, 90)"/>
</svg>

In order to identify which cell / hexagon got e.g. clicked in a UI there should be either the id or any custom attribute be set.

---

I know there are some issues in the cairo project (e.g. Ability to output metadata during SVG rendering), I need to find them and see what solution could be done.
When possible a custom build of cairo should be avoided.

[gfoidl]

Add support for hyperlinks in the SVG backend and search for tag_begin may be helpful on the native side.