AngularJS在SVG常量中設置填充顏色

我有以下常量，這在前端用作選擇框。這個想法是把SVG放在DOM中，它可以工作。AngularJS在SVG常量中設置填充顏色

(function() { 
    'use strict'; 
    angular.module('app.constants', []) 
     .constant('ServiceSettings', 
      'markersType': [ 
       {text: 'original', value: 'original', src: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151.3 242" style="enable-background:new 0 0 151.3 242;" xml:space="preserve"><style type="text/css">.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_2_);}</style><g><g><path class="st0 marker-fill" fill="input.markerView.color" ng-style="{\'fill\': input.markerView.color}" d="M75.7,0v29.3c25.6,0,46.3,20.7,46.3,46.3S101.3,122,75.7,122v120c0,0,75.7-124.5,75.7-166.3S117.5,0,75.7,0z"/></g><g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="37.8335" y1="160.2691" x2="37.8335" y2="116.9304" gradientTransform="matrix(1 0 0 -1 0 240.266)"><stop offset="0" style="stop-color:#5AC9E5"/><stop offset="1" style="stop-color:#4FBCD6"/></linearGradient><path class="st1" fill="url(#SVGID_1_)" d="M75.7,242V122c-25.6,0-46.3-20.7-46.3-46.3H0C0,117.5,75.7,242,75.7,242z"/><path class="st0 marker-fill" d="M75.7,29.3V0C33.9,0,0,33.9,0,75.7h29.3C29.3,50.1,50.1,29.3,75.7,29.3z"/></g><g><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="75.667" y1="209.5996" x2="75.667" y2="119.0651" gradientTransform="matrix(1 0 0 -1 0 240.266)"><stop offset="0" style="stop-color:#347C8D"/><stop offset="1" style="stop-color:#4FBCD6"/></linearGradient><path class="st2" fill="url(#SVGID_1_)" d="M75.7,29.3c-25.6,0-46.3,20.7-46.3,46.3S50.1,122,75.7,122S122,101.3,122,75.7S101.3,29.3,75.7,29.3z M75.7,107.7c-17.7,0-32-14.3-32-32s14.3-32,32-32c17.7,0,32,14.3,32,32S93.3,107.7,75.7,107.7z"/><circle class="st3" fill="#ffffff" cx="75.7" cy="75.7" r="32"/></g></g></svg>'} 
      ],

唯一不起作用的是顏色。

<path class="st0 marker-fill" fill="input.markerView.color" ng-style="{\'fill\': input.markerView.color}" d="M75.7,0v29.3c25.6,0,46.3,20.7,46.3,46.3S101.3,122,75.7,122v120c0,0,75.7-124.5,75.7-166.3S117.5,0,75.7,0z"/>

我嘗試設置填充2種方式但既不工作。

$scope.styleMarker = function() { 
    $scope.input.markerView = {}; 
    $scope.input.markerView.color = ServiceSettings.markersHex[$scope.input.iconColor.value][$scope.input.iconShade.value]; 
    generalService.buildElement($scope.input.markerView.src, $scope.input.markerView.color); 
    $scope.input.markerView.src = $sce.trustAsHtml($scope.input.iconType.src); 
    console.log($scope.input.markerView); 
};

在設定fill色彩的作品是如果整個SVG腳本手動添加到視圖，但我想有它在恆定的，這樣不會重複SVG腳本的唯一方法。

來源

2015-10-13 ngplayground

你既有fill屬性和ng-style。您應該只需要設置fill這樣

<path class="st0 marker-fill" ng-attr-fill="{{input.markerView.color}}" ....

始終使用ng-attr與SVG當過你有一個表達式設置的屬性。除非您使用ng-attr，否則有關於Angular沒有機會處理SVG屬性的文檔化問題。它與JavaScript有機會之前執行SVG有關。

來源

2015-10-13 21:52:48 cgTag

AngularJS在SVG常量中設置填充顏色

回答

相關問題