ng-include在SVG上，但包括维度

Question

我喜欢这种技术，但是众所周知，svg图形的一个好处就是你可以重新调整大小并重复使用同一个文件。是否可以将大小变量添加到ng-include？

例如：

<div ng-include="'img/logo-rev.svg'" class="ng-scope" width="50">

Answer 1

答案是不在SVG中指定width或height。或者如果您这样做，请确保它们都设置为"100%"。然后，只要您的SVG具有合适的viewBox属性，它就会缩放到您创建其父级的任何大小。

.small {
  width: 50px;
  height: 50px;
}

.large {
  width: 150px;
  height: 150px;
}

<div class="small">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>
</div>


<div class="large">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="green"/>
  </svg>
</div>

请注意，上例中的两个SVG是相同的。