Question

我有以下模板（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>

另外，当我在浏览器中编辑它时，它就像规则被忽略了...... 我怀疑它与Angular Styling有关（它为样式添加了自己的属性，因此不是样式化

i svg

它的样式

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

为什么会这样？我从经验中知道你可以设置这样的SVG，我做到了，但在这种特殊情况下它不起作用......为什么？

Answer 1

我怀疑它的角度是否正确，这是正确的，添加

encapsulation: ViewEncapsulation.None

在组件的TS中的StyleUrls解决了这个

之后

无法在<i>中设置inlineSVG的样式

1 个答案: