Angular 2 SVG CSS在组件内部呈现不同 [英] Angular 2 SVG CSS rendering differently inside component

问题描述

使用以下代码片段将一些设计转移到Angular 2：

Transferring some designs to Angular 2 and am using the following code snippet:

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

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

When I use this code outside of the angular component with the exact same stylesheet applied the SVG element scales properly, but as soon as I add it to the inside of an Angular component, no scaling occurs at all. Is this an Angular issue?

这是一个Angular组件之外的具有相同样式的图片：

This is an image of outside the Angular component with same styles:

这是SVG内部Angular组件的图片：

This is an image of the SVG inside Angular component:

推荐答案

/ p>

This should work,

<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>

这篇关于Angular 2 SVG CSS在组件内部呈现不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！