如何调整SVG的大小？

Question

我尝试了在stackoverflow和google上找到的许多方法，但我的svg图像没有重新调整大小。能否有人解释一下原因？

<div>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

https://codepen.io/hellojessicagraham/pen/XBOyzP

- DumbDevGirl42069

---

你到目前为止尝试过什么没有起作用？ - Michael Kolber

我在代码示例中展示的方法是使用“viewBox”。我还尝试将其包装在div中并更改div的大小，svg标签的大小，将其放入span中，显示块，内联块。 - DumbDevGirl42069

修改 <svg> 元素的 height 和 width 属性对我有效。 - Michael Kolber

20像素乘以20像素 - 它是20像素乘以20像素，但它没有被重新调整大小，就像只是把外面的部分裁掉了 :-/ - DumbDevGirl42069

我在问题中没有看到你尝试过那个方法。来自为什么有些问题被标记为重复？的内容：“如果你看到一个问题并不认为它真的是一个重复的问题，请编辑它以突出差异”（原文强调）。 - Heretic Monkey

Answer 1

我调整了视窗的值并删除了SVG的CSS样式。

<svg viewBox="15 32 75 36" height="20px" width="20px">

https://codepen.io/anon/pen/OwddPa

解释SVG视口如何工作： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

- souzan

---

它的比例不对... 它是一个带有圆角的加号。 - DumbDevGirl42069

好的，请检查我的更新答案。我添加了一个边框在SVG周围，这样你就可以看到它被裁剪的方式了。 - souzan

Answer 2

您可以通过修改您的标签上的“width”和“height”属性来实现。

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

或者，也可以通过 CSS，在样式表中添加：

svg{
  width:100px;
  height:100px;
}

<div style='background:red'>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

- Vicky Maharjan