无法在<i>

Question

i具有以下模板（Angular [2]）

<label for="draw">
    <i [inlineSVG]="../../../assets/svg/edit.svg"></i>
</label>

和以下sass

      i {
          //works
          display: block;
          width: 33px;
          height: 28px;
          svg {
            //Not Works
            width: 100%;
            height: 100%;
          }
      }

尽管编译HTML看起来不错

<label _ngcontent-c5="" for="draw">
            <i _ngcontent-c5="" ng-reflect-inline-s-v-g="../../../assets/svg/edit.svg"><svg fill="#5B6174" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="m 70.506102,970.54238 -4.2426,4.2426 11.3137,11.3137 4.242596,-4.2426 -11.313696,-11.3137 z m -7.071,7.0711 -41.7193,41.71932 11.3137,11.3137 41.7193,-41.71942 -11.3137,-11.3136 z m -43.9732,45.12222 -1.2817,11.4463 11.4464,-1.2816 -10.1647,-10.1647 z" fill="#5B6174" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg></i>
          </label>

另外，当我在浏览器中进行编辑时，它可以像忽略的规则一样。我怀疑这与棱角式的样式有关（它增加了自己的风格，因此，而不是造型

i svg 

styles

i[_ngcontent-c4]  svg[_ngcontent-c4] 

为什么会发生这种情况？我从实验中知道您可以为这样的SVG造型，我做到了，但是在这种特殊情况下它不起作用...为什么？

Answer 1

我对角度旋转风格的怀疑是正确的，添加

encapsulation: ViewEncapsulation.None

在组件的ts中的styleurls解决了此