将 svg 与 html 页面中的 div 合并

Posted 2023-03-06

【中文标题】将 svg 与 html 页面中的 div 合并

【英文标题】：Merge svg with a div in a html page

【发布时间】：2016-07-02 08:13:48

【问题描述】：

我正在尝试在网页上显示流程图，并根据用户选择的一些选项进行加载。我在 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>

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

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

【参考方案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>

【讨论】：

如果我使用 x1, y1... 我收到此错误“ 属性 x1: 的值无效”。让我试试 ng-attr。我是否必须创建一个新指令才能使用 ng-attr

没有。在docs.angularjs.org/guide/interpolation 中查看更多关于ngAttr 的信息还有svg 元素的示例