0

在我的项目中，我使用 Inline svgs 如下：

HTML

<div style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="dropdown" viewBox="0 0 3.359 1.929"><path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path></symbol>
  </svg>
</div>
<div one-svg svg-href="'dropdown'"></div>

JS

var app = angular.module('app', []);

app.directive('oneSvg', function() {
    return {
        templateUrl: 'inline-svg.html',
        scope: {
            svgHref: "=",
            svgClass: "="
        }
    };
});

内联-svg.html

<svg ng-class="svgClass">
    <use ng-href="{{ '#' + svgHref }}" ng-attr-href="{{ '#' + svgHref }}" href=""></use>
</svg>

这是小提琴

上面创建的指令仅适用于 Chrome 和 IE10，但不适用于Firefox (v 50.1.0)。

如果我添加没有指令的内联 SVG，它在 Firefox 中运行良好。请帮助我使指令即使在 Firefox 中也能正常工作。

4

1 回答 1

1

查看此PLUNKER中的更改。
它在 FireFox、Chrome 和 Safari 上对我有用。

html: 

<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" <svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <defs>
    <symbol id="dropdown" viewBox="0 0 3.359 1.929">
      <path d="M1.68 1.929a.29.29 0 0 1-.204-.083L.085.484a.28.28 0 0 1 0-.401.293.293 0 0 1 .409 0L1.68 1.244 2.865.083a.294.294 0 0 1 .41 0 .28.28 0 0 1 0 .401l-1.39 1.361a.3.3 0 0 1-.205.084z"></path>
    </symbol>
  </defs>
</svg>

<div one-svg="dropdown"></div>

指示：

app.directive('oneSvg', function() {
    return {
        template: '<svg ng-class="svgClass"><use xlink:href="{{ \'#\' + href }}"></use></svg>',
        scope: {
            href: "@oneSvg",
            svgClass: "=?"
        }
    };
});
于 2017-01-25T07:58:01.983 回答