修剪 SVG 的额外空间而不改变其大小答案

【问题标题】：trim the extra space of SVG without changing its size修剪 SVG 的额外空间而不改变其大小
【发布时间】：2022-02-15 01:13:59
【问题描述】：

如何在不改变 svg 大小的情况下修剪 svg 周围的额外空间：

<svg fill="#807c8c" width="45" height="45" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
                 <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
                </svg>

我已经为 viewBox 尝试了一百万个值，但似乎我无法找出逻辑...

【问题讨论】：

你所说的“额外空格”是什么？
viewBox="150 75 400 400" 应该让你接近 - codepen.io/Paulie-D/pen/yLPzNwx
stroke-width:5px; 在 SVG 中使用单元没有意义......
@MisterJojo 当 stroke-width 在 CSS 中通过 style 属性指定时，它必须有一个单位，因为它是 CSS <length> data-type，而不是 SVG <length> 数据类型。
@sean 不，它不是 stroke-width 不是 DOM 元素的长度，它仅适用于 SVG 元素

标签： html css svg

【解决方案1】：

我认为您正在寻找这样的东西，其中 SVG 会剪掉艺术作品周围的额外空间，而不会使艺术作品的外观尺寸变大。请注意，我修改了 viewBox 和 width 和 height 属性。

svg {
  background: pink;
}

<p>Before:</p>
<svg fill="#807c8c" width="45" height="45" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
  <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
</svg>
<p>After:</p>
<svg fill="#807c8c" width="28" height="28" version="1.1" viewBox="150 80 400 400" xmlns="http://www.w3.org/2000/svg">
  <path style="stroke:#ffffff;stroke-width:5px;" d="m175 210c-3.0938 0-6.0625-1.2266-8.25-3.4141-2.1914-2.1875-3.418-5.1562-3.418-8.2539v-23.332c0.027344-21.652 8.6406-42.41 23.949-57.719s36.066-23.922 57.719-23.949h23.332c6.4453 0 11.668 5.2266 11.668 11.668s-5.2227 11.668-11.668 11.668h-23.332c-15.465 0.015625-30.293 6.1641-41.23 17.102s-17.086 25.766-17.102 41.23v23.332c0 3.0977-1.2266 6.0664-3.418 8.2539-2.1875 2.1875-5.1562 3.4141-8.25 3.4141zm361.67 175v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c-0.015625 15.465-6.1641 30.293-17.102 41.23s-25.766 17.086-41.23 17.102h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c21.652-0.027344 42.41-8.6406 57.719-23.949s23.922-36.066 23.949-57.719zm-256.67 70c0-3.0938-1.2266-6.0625-3.4141-8.25-2.1875-2.1914-5.1562-3.418-8.2539-3.418h-23.332c-15.465-0.015625-30.293-6.1641-41.23-17.102s-17.086-25.766-17.102-41.23v-23.332c0-6.4453-5.2266-11.668-11.668-11.668s-11.668 5.2227-11.668 11.668v23.332c0.027344 21.652 8.6406 42.41 23.949 57.719s36.066 23.922 57.719 23.949h23.332c3.0977 0 6.0664-1.2266 8.2539-3.418 2.1875-2.1875 3.4141-5.1562 3.4141-8.25zm256.67-256.67v-23.332c-0.027344-21.652-8.6406-42.41-23.949-57.719s-36.066-23.922-57.719-23.949h-23.332c-6.4453 0-11.668 5.2266-11.668 11.668s5.2227 11.668 11.668 11.668h23.332c15.465 0.015625 30.293 6.1641 41.23 17.102s17.086 25.766 17.102 41.23v23.332c0 6.4453 5.2266 11.668 11.668 11.668s11.668-5.2227 11.668-11.668z"/>
</svg>

【讨论】：