SVG<；使用>；调整大小

嗨，我正在使用可重用的SVG组件

<svg id="svgs" style='display:none;'>
  <defs>
    <g id="cross" viewBox="0 0 20 20">
      <path d="M19.56....."/>
    </g>
  </defs>
</svg>

<div>
  The button
</div>
<button class='red-button'>
  <svg class='icon-cross' preserveAspectRatio="xMinYMin meet">
   <use xlink:href="#cross"></use>
  </svg>
</button>

<div style='margin-top: 2em'>
  Small button :(
</div>
<button class='red-button small'>
  <svg class='icon-cross' preserveAspectRatio="xMinYMin meet">
    <use xlink:href="#cross"></use>
  </svg>
</button>

按钮
小按钮：(

看到这里了吗

有没有办法使svg响应其容器？

g元素没有任何受支持的viewBox属性。如果将g元素更改为svg，它的缩放效果会很好。如下所示：

<svg id="svgs" style='display:none;'>
  <defs>
    <svg id="cross" viewBox="0 0 20 20">
      <path d="M19.56....."/>
    </svg>
  </defs>
</svg>

---

太棒了！谢谢