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"/>

我尝试设置填充方式但不起作用。

$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有关。

AngularJS将填充颜色设置为SVG常量

1 个答案: