D3角度混淆：填充顏色不變

使用D3 JS開發角度應用程序，並面臨無法更改svg填充顏色的問題。D3角度混淆：填充顏色不變

如果你看看這個代碼，你可以看到，我創建一個SVG和試圖插入從我的供應商的另一個問題：

function link (scope, element, attrs) { 
     var svgContainer = d3.select(element[0]).append("svg") 
              .attr("width", $window.screenX - 2*100) 
              .attr("id", "oil-game") 
              .attr("height", 1200); 

     var well = svgContainer.append("g"); 
     angular.forEach(scope.d3WellDetails, function (value, key) { 
      var circle = well.append("circle") 
            .attr("cx", 55) 
            .attr("cy", 100 + key*115) 
            .attr("r", 40) 
            .attr('stroke', '#0897c7') 
            .attr('stroke-width', '5') 
            .attr('fill', 'white'); 
      well.append("text") 
       .attr('x', 50) 
       .attr('y', 85 + key*115) 
       .attr('fill', '#0897c7') 
       .attr('font-size', 16) 
       .attr('font-weight', 900) 
       .text(value.Name); 
      well.append('svg:image') 
       .attr('xlink:href', '../../images/wells.svg') 
       .attr('x', 40) 
       .attr('y', 95 + key*115) 
       .attr("width", 30) 
       .attr("height", 30) 
       .attr('fill', '#0897c7'); 
     }); 
}

我要你看看到最後一部分，當我追加新SVG。如果我使用的是.attr('xlink:href', '//')，我無法更改svg的填充顏色。

但是，如果我使用.attr('src', '//')我看不到svg圖像，但在開發人員工具，我可以看到它爲空。

我該如何解決？

來源

2015-12-21 Merge-pony

你問改變填充屬性在進口svg（../../images/w ells.svg）...我不認爲它可能會像你所做的那樣。然而，一種方法是做一個ajax來獲取wells.svg，然後在well.svg中添加填充樣式屬性，然後添加它.. – Cyril

@Cyril關鍵是我無法用css也不通過改變填充svg指示。只有當我在svg中設置屬性'fill =「＃color」'時，才進行填充更改。這是一種預期的行爲嗎？我不這麼認爲。也許我錯誤了，當我把svg指令？ –

你不能改變'' –

這種情況下的問題並不是與Angular有關，而是與將外部SVG附加爲圖像的方式相關。

相反，我建議你將外部SVG追加爲SVG定義，並將其與'use'屬性一起使用。這將允許您在事後調整導入的SVG的樣式。請記住，定義中的內聯樣式將覆蓋事實後添加了js或css的樣式。

下面是一個例子：https://jsfiddle.net/3fx1553f/

HTML：

<svg id="svg-defs" version="1.1" style="display:none"> 
    <defs> 
    <g id="gdef1"> 
     <circle id="s1" cx="200" cy="200" r="100" stroke="black" stroke-width="3" /> 
    </g> 
    </defs> 
</svg> 
<div id="container"> 
</div>

CSS：

.fill-red { 
    fill: red; 
}

JS：

var svg = d3.select('#container') 
    .append('svg') 
    .attr('id', 'main') 
    .attr('width', '540px') 
    .attr('height', '540px'); 

svg.append('g') 
    .attr('class','fill-red') 
    .append('use') 
    .attr('xlink:href', '#gdef1');

來源

2016-01-11 18:05:50

D3角度混淆：填充顏色不變

回答

相關問題