如何将 AngularJS 与 SVG 标签一起使用？我想从 angular 传递 SVG 标签中的参数

Question

我想通过 AngularJS 从用户那里获取输入并将其应用到 SVG 圆形标签上。有没有人可以帮我解决这个问题？

我在这里做的事情：

<div class="app" ng-app>
  <div ng-controller="ctrlSizing">
    <label>Radius:
      <input ng-model="rad" type="number" placeholder="How about 300?">
    </label>
  </div>
</div>
<div style="height: 800; width: 500; position:absolute; left: 100px;top: 100px;">
  <svg width="500" height="500" visibility="visible">
    <circle id="circle1" cx="150" cy="150" r="getRad()" stroke="black" stroke-width="2" fill="grey" />
  </svg>
</div>

Answer 1

在圆上使用 ng-attr-r 而不是 r 属性。

标记

<div data-ng-controller="AppCtrl" id="ctrl">
    <input data-ng-model="rad"> {{rad}}
    <div style="height: 800; width: 500; position:absolute; left: 100px;top: 100px;">
            <svg width="500" height="500" visibility="visible" >
                <circle id="circle1" cx="150" cy="150" ng-attr-r="{{rad}}" stroke="black" stroke-width="2" fill="grey" />
            </svg>
    </div>
</div>

如何将 AngularJS 与 SVG 标签一起使用？我想从 angular 传递 SVG 标签中的参数

How do I use AngularJS with SVG tag ? I want to pass a parameter in SVG tag from angular

html

svg

angularjs

angularjs-directive