根據外部數據源SVG圖像樣式/顏色更改

我是svg和角度js的初學者。我有SVG圖像集合在我的html頁面作爲group.Among他們，我有一個SVG圈如下：根據外部數據源SVG圖像樣式/顏色更改

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

我需要圓的顏色從紅色變爲根據來自外部數據源的輸入使用角度js爲藍色。我該怎麼做？我試圖在svg中插入div標籤並應用ng-if但svg中的div標籤不起作用。我不能將條件放在公共div中，因爲它可能會影響其他SVG元素。我該怎麼做？請幫助...提前:)

好謝謝，我找到了這個問題的答案... 我刪除div標籤和修改的代碼如下：

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

來源

2016-01-20 AngularDoubts

你可以通過綁定你的角度控制器的圈子的fill屬性來做到這一點 – aitnasser

使用ngStyle：

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

而在你的控制器，S等$scope.color根據您的外部輸入源的任何顏色。此外，將其設置爲默認值：

$scope.color = "#ff0000";

來源

2016-01-20 06:12:25

非常感謝你的回覆......我試過了，但如果我遵循這種方式，因爲我對所有元素使用單個SVG標籤因此如果我給麥粒腫共同它將被應用於我寫在裏面的每一個元素......但是我的要求是一個元素的特定風格......我已經找到了解決問題的解決方案。再次非常感謝你的迴應...... – AngularDoubts

嗯，我找到了這個問題的答案... 我刪除div標籤和修改的代碼如下：

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

來源

2016-01-20 09:01:27 AngularDoubts

根據外部數據源SVG圖像樣式/顏色更改

回答

相關問題