javascript - 将 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>