Question

我是svg和angular js的初学者。我的html页面中有一组svg图像作为一个组。其中，我有一个SVG圈子如下：

＆＃13;

<div> 
<svg>
<g>
....
<circle id="myCircle" cx="100" cy="40" r="5" style="stroke:#909090;stroke-width:1px;fill:#ff0000;" />
..
</g>
</svg>
  </div>

＆＃13;

我需要根据使用角度js的外部数据源的输入，将圆的颜色从红色更改为蓝色。我该怎么做？我试图在svg中插入一个div标签并应用ng-if但svg中的div标签不起作用。我不能将条件放在公共div中，因为它可能会影响其他SVG元素。我该怎么做？请帮忙... 在此先感谢：）

好吧，我找到了这个问题的答案...... 我删除了div标签并修改了代码如下：

＆＃13;

<circle ng-if="Externaldata == value" cx="100" cy="40" r="5" stroke="blue" stroke-width="5" fill="blue" />

＆＃13;

Answer 1

使用ngStyle：

//color here is a variable which is set in your controller and holds the color value
<svg ng-style="{'fill': color}">
</svg>

在控制器中，根据外部输入源将$scope.color设置为任何颜色。另外，将其设置为默认值：

$scope.color = "#ff0000";

Answer 2

好吧，我找到了这个问题的答案...... 我删除了div标签并修改了代码如下：

＆＃13;

<circle ng-if="Externaldata == value" cx="100" cy="40" r="5" stroke="blue" stroke-width="5" fill="blue" />

＆＃13;

SVG图像样式/颜色根据外部数据源

2 个答案: