Как покрасить svg: маркер под цвет линии

Question

У меня есть следующий шаблон ng для генерации линий со стрелками:

<ng-template #linkTemplate let-link>
            <svg:g class="edge">
                <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4"
                    orient="auto">
                    <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                </svg:marker>
                <svg:path class="line" [attr.stroke]="link.color" stroke-width="2" marker-end="url(#arrow)">
                </svg:path>                    
            </svg:g>
        </ng-template>

Как я могу покрасить наконечник стрелки в цвет, указанный в переменной link.color?

Answer 1

Хитрость заключалась в том, чтобы определить два шаблона для наконечника стрелки и ссылки из пути линии соответственно.

<ng-template #linkTemplate let-link>
                <svg:g class="edge">
                    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
                    </svg:marker>
                    <svg:marker id="arrow-sel" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
                        <svg:path d="M0,-5L10,0L0,5" class="arrow-head-sel" />
                    </svg:marker>
                    <svg:path class="line" [attr.stroke]="link.color" stroke-width="2" [attr.marker-end]="link.color === undefined ? 'url(#arrow)' : 'url(#arrow-sel)'">
                    </svg:path>           
                </svg:g>
            </ng-template>