Question

我正在Angular中使用SVG图形组件，该组件显示之间具有链接的节点。最后，链接具有箭头。这很好。但是，如果我创建两个或多个图形组件实例，则箭头只会出现在第一个图形中。

如果我查看html语法，则所有图形都具有箭头和路径模板。我认为这可能与箭头需要唯一的ID有关，并且在创建多个实例时，会有许多具有相同ID的箭头标记。

所以我尝试在Angular的帮助下使id动态，但是在那种情况下，即使id和marker-end在html中都没有显示箭头。该代码显示了图形的呈现方式。

您知道为什么箭头仅出现在图形的第一个实例中吗？

    <ngx-graph [links]="links" [nodes]="nodes">
                <ng-template #nodeTemplate let-node>
                <svg:g class="node"></svg:g>
            </ng-template>

            <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 [attr.marker-end]="url(#arrow)">
                </svg:path>                  
                </svg:g>
            </ng-template>
    </ngx-graph>

这里是带有动态ID的代码，这些ID被正确地打印到dom树上，但是在这种情况下，没有显示箭头：

<ng-template #linkTemplate let-link>
            <svg:g class="edge">
                <svg:marker id="{{link.id}}" 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 [attr.marker-end]="'url(#'+ link.id +')'">
                </svg:path>                    
            </svg:g>
        </ng-template>

svg：标记箭头始终未显示

0 个答案: