Angular 2 SVG CSS在组件内部呈现不同答案

【问题标题】：Angular 2 SVG CSS rendering differently inside componentAngular 2 SVG CSS在组件内部呈现不同
【发布时间】：2016-08-02 12:37:10
【问题描述】：

将一些设计转移到 Angular 2 并使用以下代码 sn-p：

<svg class="header__icon help__icon" viewbox="0 0 32 32">
  <use xlink:href="images/icon/info-help_small.svg#help__icon"></use>
</svg>

当我在 Angular 组件外部使用此代码并应用完全相同的样式表时，SVG 元素会正确缩放，但是一旦我将它添加到 Angular 组件内部，根本不会发生缩放。这是 Angular 的问题吗？

这是 Angular 组件外部的图片，样式相同：

这是 Angular 组件内的 SVG 图像：

【问题讨论】：

如何缩放它？你用的是什么款式？请提供更多允许复制的信息？
SVG 区分大小写，因此请尝试使用 viewBox 而不是不正确的 viewbox。
将“viewbox”重命名为“viewBox”解决了这个问题。不会撒谎，我可能不会尝试这个，因为它在正常的 html 模式下工作。如果您将此作为答案提交，我可以标记它。

【解决方案1】：

这应该可行，

<svg class="header__icon help__icon" viewbox="0 0 32 32">
  <use [attr.xlink:href]="images/icon/info-help_small.svg#help__icon"></use>
</svg>

【讨论】：