ng-包含 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是相同的。