时间戳

首页 > 解决方案 > 如何在不使用 CSS 的情况下通过更改 SVG 来调整 SVG 的大小

svg - 如何在不使用 CSS 的情况下通过更改 SVG 来调整 SVG 的大小

问题描述

如何在不使用 CSS 的情况下仅通过更改 SVG 本身来调整 SVG 的大小。

这是我的 SVG，我希望它是 17x17

  <svg xmlns="http://www.w3.org/2000/svg"  width="420px" height="420px"  fill="none" stroke="#dcdcdc">
    <path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z"/>
    <path stroke-width="18" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
    </svg>

谢谢！

标签： svg

解决方案

正如我所评论的，您需要将 viewBox 属性添加到 svg 元素。viewBox 属性的值是一个由四个数字组成的列表：min-x、min-y、width 和 height，在这种情况下应该等于路径组的边界框 + 一些额外的空间以适应宽笔画。

console.log(group.getBBox())
body{background:black}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 420"  width="17"  fill="none" stroke="#dcdcdc">
  <g id="group">
    <path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z"/>
    <path stroke-width="18" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
  </g>
    </svg>

推荐阅读