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

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

Answer 2

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

<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>

如何调整svg的大小？

2 个答案: