如何在不破坏此 SVG 的情况下更改其宽度和高度？答案

【问题标题】：How can I change the width and height of this SVG without breaking it?如何在不破坏此 SVG 的情况下更改其宽度和高度？
【发布时间】：2022-01-08 15:35:03
【问题描述】：

我有这个 SVG，我想让它的高度或/和宽度更大，但在一致性上看起来完全一样：

<svg width="104" height="102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>

如果我将宽度和高度设置为更大的数字（从 104x102 到 416x408），尺寸不会有任何区别：

<svg width="416" height="408" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>

【问题讨论】：

你如何显示这个？
您尝试过哪些不起作用的方法？您所说的“在一致性上看起来完全一样”是什么意思？
我的意思是当我尝试给它 9.4rem 的高度和 9rem 的宽度时，它看起来变形了。我的 rem 值为 1rem= 10 px;
看起来像这样imgur.com/JBc7Phf ????
首先，删除宽度/高度并使用正确的viewbox。除此之外，无法重现 - codepen.io/Paulie-D/pen/xxXJyEW

标签： css svg

【解决方案1】：

在<svg> 上使用viewBox 属性通常是个好主意。它定义了 SVG 的内部尺寸。

在示例中，我删除了宽度和高度属性，设置 viewBox 并使用 CSS 定义高度或宽度。如果不定义高度或宽度（仅 viewBox），SVG 将占用 100 % 的可用宽度。

svg:nth-child(1) {
  height: 20px;
}

svg:nth-child(2) {
  height: 5em;
}

svg:nth-child(3) {
  width: 50%;
}

<svg viewBox="0 0 104 102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>
<svg viewBox="0 0 104 102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>
<svg viewBox="0 0 104 102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>

【讨论】：