AngularJS在SVG常量中设置填充颜色

Question

我有以下常量，这在前端用作选择框。这个想法是把SVG放在DOM中，它可以工作。

(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脚本的唯一方法。

Answer 1

你既有fill属性和ng-style。您应该只需要设置fill这样

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

始终使用ng-attr与SVG当过你有一个表达式设置的属性。除非您使用ng-attr，否则有关于Angular没有机会处理SVG属性的文档化问题。它与JavaScript有机会之前执行SVG有关。