SVG操作漸變填充顏色

我想在一個簡單的svg矩形中編程操縱漸變填充顏色。SVG操作漸變填充顏色

有2種解決方案。我不喜歡繪製多個反義詞並將它們連接在一起以獲得一個大反應。所以我正在嘗試這種漸變顏色方法。

我所做的是試圖在「linearGradiant」標記中插入「stop」標記，然後SVG開始繪製矩形。但不知何故，我的代碼不工作。

我可以看到矩形是在我運行我的代碼之後繪製的，但是矩形只是沒有呈現。如果我將填充從「url（＃c1）」更改爲「blue」，我可以看到矩形會呈現藍色。

代碼正在使用AngularJS指令。

'use strict' 

angular.module('StanfordClinicalGenomics').directive('chromosomeFillChart', ['$compile', '$location',function($compile,$location) { 

return { 

    restrict: 'E', 
    templateUrl: "app/directives/chromosome_fill/chromosome_fill.html", 
    scope: { 
     data: "=data", 
     cid: "=cid", 
     vid: "=vid", 
    }, 
    controller: function($scope, $element, $attrs, $compile, $http, $route, $rootScope, $timeout) { 

     var data = $scope.data; 

     if ($scope.cid){ 
      var chart = d3.select('chromosome-fill-chart[cid='+"'"+$scope.cid+"'"+'] svg.withFill') //this is just a selector 
      .attr("width", 30) 
      .attr("height", 100); 


      $timeout(function(){ 
       angular.element("#c"+$scope.cid).append($compile('<stop offset="33%" stop-color="skyblue" />')($scope)); 

       angular.element("#c"+$scope.cid).append($compile('<stop offset="33%" stop-color="#FF6" />')($scope)); 
       $scope.$apply(); 
       var bar = chart.append("g") 
       .append("rect") 
       .attr("width", 30) 
       .attr("fill", "url(#c"+$scope.cid+")") 
       .attr("height",data[0]); 


      });  
     } 
    } 
}

}]）;

下面是HTML：

<svg class="withFill"> 
<defs> 
    <linearGradient id="c{{cid}}" x1="0%" y1="0%" x2="0%" y2="100%"></linearGradient> 
</defs> 
</svg>

下面是代碼在我的Chrome瀏覽器：

<chromosome-fill-chart data="[100,20,76]" cid="1" class="ng-isolate-scope"> 
<svg class="withFill" width="30" height="100"> 

    <defs> 
     <linearGradient id="c1" x1="0%" y1="0%" x2="0%" y2="100%"> 
      <stop offset="33%" stop-color="skyblue" class="ng-scope"></stop> 
      <stop offset="33%" stop-color="#FF6" class="ng-scope"></stop> 
     </linearGradient> 
    </defs> 


<g><rect width="30" fill="url(#c1)" height="100"></rect></g> 
</svg> 
</chromosome-fill-chart>

來源

2015-09-24 user3781258

爲了以防萬一，我的預期效果將是一個填充2種不同顏色的矩形。高達33％將是天藍色，33％至100％將是黃色 – user3781258

你應該添加您的<stop>元素與D3，沒有棱角。我很確定Angular的$compile()將創建stop元素，它們位於HTML /默認名稱空間中。但是他們需要在SVG名稱空間中。

來源

2015-09-24 05:47:41

它的工作原理。非常感謝 – user3781258

SVG操作漸變填充顏色

回答

相關問題