Question

我已经设置了一个NG-INCLUDE，它加载了一个SVG文件，该文件有类＆＃34; hover_color_change＆＃34;这样正确的多边形可以更新其填充属性：

<div class="prod-illustration-div col s12 m8">
   <div class="prod-svg-wrapper" ng-include="'/img/illustrations/illustration_' + productIdObj.illustration + '.svg'" onload="defaultFill(productIdObj.colors)">
    </div>
</div>

然后我有颜色样本触发$scope.hoverColorText()调用updateSVGFill()方法来显示与悬停颜色匹配的SVG填充并创建渐变阴影，因此它不是纯色

这是live link - WORKS IN CHROME

在Chrome浏览器中，它可以在Safari，FF，Edge中运行，但事实并非如此。我引用this suggested answer建议引用ID属性，我相信我已经在做了：

    $scope.defaultFill = function (colors) {
        if (colors) {
            var defaultColor = colors[Object.keys(colors)[0]];
            createGradient($('svg')[0], 'MyGradient', [
                { offset: '10%', 'stop-color': createShade(defaultColor, 0.2) },
                { offset: '100%', 'stop-color': defaultColor }
            ]);
            updateSvgFill();
            return true;
        }
    };

    $scope.hoverColor = ' ';
    $scope.hoverColorText = function (selectedHover) {
        if (selectedHover.hex) {
            $scope.hoverColor = selectedHover.color;
            updateGradient(selectedHover.hex);
        }
    };

    function updateGradient(color) {
        $('linearGradient#MyGradient #stop-0').attr('stop-color', createShade(color, 0.2));
        $('linearGradient#MyGradient #stop-1').attr('stop-color', color);
    }


    function createGradient(svg, id, stops) {
        var svgNS = svg.namespaceURI;
        var grad = document.createElementNS(svgNS, 'linearGradient');
        grad.setAttribute('id', id);
        for (var i = 0; i < stops.length; i++) {
            var attrs = stops[i];
            var stop = document.createElementNS(svgNS, 'stop');
            stop.id = 'stop-' + i;
            for (var attr in attrs) {
                if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
            }
            grad.appendChild(stop);
        }

        var defs = svg.querySelector('defs') || svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
        return defs.appendChild(grad);
    }

    function createShade(color, percent) {
        var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF;
        return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
    }

    function updateSvgFill(hex) {
        $('.hover_color_change').attr('fill', 'url(#MyGradient)');
    }

所以：我是否正确地将这个SVG资产包含在NG-Include中？

当然，如果我删除填充更改在悬停时工作正常。

ng-include内联SVG <lineargradient>除Chrome中外不显示渐变

0 个答案: