Question

您好我使用可重复使用的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>

请参阅codepen

有没有办法让svgs响应他们的容器？

Answer 1

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>

SVG <use>调整大小

1 个答案: