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
中,它的高度和宽度设置为零.
我正在尝试将 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
中,它的高度和宽度设置为零.