Angular2 SVG 指令静默失败

Angular2 SVG directive silently failing

我正在尝试将 ng2-inline-svg 插件与我的 Angular2 应用程序一起使用,但它是否无提示地失败了。

外部模板:

<div class="my-icon" aria-label="My icon" [inlineSVG]="'src/assets/svg/sprite.svg'"></div>

组件中的引用:

@Component({ selector: "home", styleUrls: [], templateUrl: "./home.component.html" })

我可以用我的 chrome 检查器来查看这个

<div aria-label="My icon" class="my-icon" ng-reflect-inline-s-v-g="src/assets/svg/sprite.svg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width: 0; height: 0"> <symbol viewBox="0 0 100 100" id="icon-plus"> ... </symbol> <symbol viewBox="0 0 77 100" id="icon-edit"> ... </symbol> </svg></div>

在检查器中,但它没有显示在页面上。

问题似乎出在我的 svg 样式上,而不是插件上。

例如,这个文件有效:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" height="100" width="100"> <g transform="translate(0,-952.36216)"> <path transform="translate(0,952.36216)" d="M 40 0 L 40 40 L 0 40 L 0 60 L 40 60 L 40 100 L 60 100 L 60 60 L 100 60 L 100 40 L 60 40 L 60 0 L 40 0 z " /> </g> </svg>

如果您查看 svg 标签的末尾,您可以看到定义高度和宽度的位置,而在我发布的原始 svg 中,它的高度和宽度设置为零.