如何调整SVG图像大小？

Question

我有这样的代码：

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

我删除了大部分内容，并用...替换了它。

这段代码目前创建了一个32x32的图标。我想知道的是，我是否可以使用这段代码来创建一个100x100的图标？我尝试改变宽度和高度，但没有任何效果。

- Samantha J T Star

Answer 1

< p > SVG元素上的 width 和 height 属性仅定义了绘图区域的大小，不会缩放内容以适应该区域。为此，您还需要使用 viewBox 属性，如下所示：

<svg viewBox="0 0 32 32" height="100" width="100" ...>

viewBox属性确定了SVG的所有子元素所使用的坐标系。您可以使用宽度和高度来将此坐标系拉伸到所需的大小。

如果纵横比不匹配，您可以使用preserveAspectRatio属性来决定如何缩放。

- mercator

---

当SVG宽度大于视口宽度时，这似乎不起作用。我使用<svg viewBox="0 0 1000 1000" style="width: 32px;height:32px" ...>获得更好的结果。 - widged

@widged，在style和width与height之间不应有任何区别。因此，我能看到你的SVG和我的唯一区别是你想将一个大的SVG缩小到图标大小，而问题是关于将一个图标大小的SVG放大。方法仍然是相同的。 - mercator

昨天我遇到了一些奇怪的行为，但今天无法再现。可能是因为有些打字错误。在http://bl.ocks.org/widged/8428059上的简单演示表明，缩小确实可以使用size属性或样式来完成相同的工作。 - widged

如果您想在包含元素中按比例缩放SVG，则可以在宽度和高度属性中使用百分比。这对于响应式布局非常有用。例如：<svg viewBox="0 0 500 300" width="75%" height="75%" … > - Caspar

Answer 2

通过修改SVG样式，它对我很有用

let svgDom = document.getElementsByTagName("svg")[0];
let newWidth=100,newHeight=90;
svgDom.style.width = newWidth+'px';
svgDom.style.height = newHeight+'px';

- Ronald Coarite

Answer 3

只需添加 transform="scale(2)" 即可解决问题，（React）

<svg
  width={56}
  height={56}
  transform="scale(2)"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  {...props}
>
  <circle cx={28} cy={28} r={24} fill="#F88423" />
  <path
    fillRule="evenodd"
    clipRule="evenodd"
    d="..."fill="#131903"
  />
</svg>

- jmirab