将 svg 与 html 页面中的 div 合并

Question

我正在尝试在网页上显示流程图，并根据用户选择的一些选项进行加载。我在 div 中创建流程图的每个元素并生成它们。在生成元素后，我正在尝试绘制连接元素的线条。

但是当我这样做时，线条会出现在元素下方。 这是我的代码。

 <div class="container">
            <div ng-repeat="x in elements">
                <br/>
                    <div id="{{y.id}}" class="box" ng-click="myfunction($event)" ng-repeat="y in x.matches">{{y.id}}</div>
                <br/>
            </div>


            <svg>
                 <g ng-repeat="line in lineList">
                 <line ng-x1={{line.x1}} ng-y1={{line.y1}} ng-x2={{line.x2}} ng-y2={{line.y2}} style="stroke:rgb(255,0,0);stroke-width:2"/>
                 </g>
           </svg>
</div>

我想在创建元素的同一分区中绘制线条。请让我知道如何做到这一点。

任何进一步的信息将根据要求提供。

Answer 1

你必须使用ng-attr-x1 而不是ng-x1：

<svg>
    <g ng-repeat="line in lineList">
         <line ng-attr-x1={{line.x1}} ng-attr-y1={{line.y1}} ng-attr-x2={{line.x2}} ng-attr-y2={{line.y2}} style="stroke:rgb(255,0,0);stroke-width:2"/>
    </g>
</svg>