Transparent arrow head?

[Ginxss]

Hi,

I am currently unsure how to create a transparent arrow head for an edge.

I am using the renderAdditionals method from the PolylineEdgeView to draw something on top of the end of an edge:

protected override renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] {
    const additionals = super.renderAdditionals(edge, segments, context);
    const p1 = segments[segments.length - 2];
    const p2 = segments[segments.length - 1];

    const arrow = (
        <path
            class-generalization={true}
            class-arrow={true}
            d='M 0.5,0 L 10,-4 L 10,4 L 0.5,0'
            transform={`rotate(${toDegrees(angleOfPoint({ x: p1.x - p2.x, y: p1.y - p2.y }))} ${p2.x} ${p2.y}) translate(${p2.x} ${
                p2.y
            })`}
        />
    );
    additionals.push(arrow);
    return additionals;
}

Which looks like this:

But I would like it to look like this:

So I would have to somehow not draw the last couple pixels of the edge. How could one achieve this?
Thanks!

[CamilleLetavernier]

Hi,

The easy way would be to fill the arrow with the same color as the diagram, rather than making it transparent.

The harder way would be to use SVG Clip, to trim the end of the edge (I don't think we have examples of this, so it might take a bit of investigation).