css 如何缩放svg大小以精确 Package 其内容？

5t7ly7z5 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(149)

我有一个非常简单的svg，里面有一个圆圈：

<div>
  <svg className="main-svg">
    <circle pathLength="25" cx="50%" cy="50%" r="25%" />
  </svg>
</div>

如果我设计它：

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

svg将占用250px的宽度和高度，但是它里面的圆会小很多，所以在圆的周围有多余白色。是否可以让svg包裹圆而不添加空白，这样定义svg的宽度和高度将导致设置它里面的圆的宽度和高度？
堆栈 lightning 链接：https://stackblitz.com/edit/react-ts-fwmjzn?file=style.css

css

来源：https://stackoverflow.com/questions/75501086/how-to-scale-svg-size-to-exactly-wrap-its-content

1条答案

按热度按时间

qcuzuvrc1#

将半径属性值设定为50%

svg {border: 2px solid red; }

<svg width="250" height="250" viewBox="0 0 250 250">
            <circle pathLength="25" cx="50%" cy="50%" r="50%" />
        </svg>

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何缩放svg大小以精确 Package 其内容？

1条答案

相关问题

热门标签

最新问答