Passing Parameter from SVG to template

Question

I'm relativly new in SVG and i didn't find any solution online for my problem..

I have a line called link. In the end of it I have a marker - Arrow Head. My line should be colored according to his settings and the head as well. But I didn't find a dynamic way to bind this color to the head.

I'm using NGX-GRAPH to draw my graph, and according to the documentation, we have to do a template with svg:path having the class line. So it is not possible to create a multi path or any other workaround (at least what i've tried failed). It must be a path. Using the marker-end with url I've managed to put in the end of the line the head. but cannot control its color dynamically.

<ng-template>
   <svg:marker id="arrowHead" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="8" markerHeight="8" orient="auto">
               <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
   </svg:marker>
</ng-template>

...

<ng-template #linkTemplate let-link>
   <svg:path class="line" [ngClass]="{'highlighted-item' : highlights.has(link.id)}" 
             [attr.stroke]="link.color" marker-end="url(#arrowHead)" >
   </svg:path>
</ng-template>

I would have liked to refer you to the [paint](https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint) value of `context-stroke` that is meant to color a marker like the stroke of the referencing path, but it is not implemented by browsers yet. — ccprog, Oct 04 '22 at 16:35

score 0 · Answer 1 · answered Oct 04 '22 at 11:40

I don't know if this is from performances point of view but it is working - So i share it here - Hope it helps someone else.

What I've down is Creating a marker for each path with a unique id according to the id of the link

<svg:marker [attr.id]="'arrowHead' + link.id" viewBox="0 -3 6 6" 
refX="5.5" refY="0" markerWidth="3" markerHeight="5" orient="auto">
                <path d="M0,-5L6,0L0,5" [attr.fill]="link.color" />
</svg:marker>
<svg:path class="line" [attr.stroke]="link.color" 
    [attr.marker-end]="'url(#arrowHead' + link.id + ')'" style="cursor: pointer">
</svg:path>

Passing Parameter from SVG to template

1 Answers1