不同尺寸的 SVG 图标答案

【问题标题】：Different sizes of SVG icons不同尺寸的 SVG 图标
【发布时间】：2019-08-31 19:23:52
【问题描述】：

我不知道为什么我在浏览器中查看这两个 svg 图标的大小不完全相同。

第一个是：

<svg viewBox="0 0 60 60">
  <path
    d='M10.3333333,16.7141667 L14.88,25.8333333 L51.6666667,25.8333333 L51.6666667,46.5 L10.3333333,46.5 L10.3333333,16.7141667 Z M56.8333333,10.3333333 L46.5,10.3333333 L51.6666667,20.6666667 L43.9166667,20.6666667 L38.75,10.3333333 L33.5833333,10.3333333 L38.75,20.6666667 L31,20.6666667 L25.8333333,10.3333333 L20.6666667,10.3333333 L25.8333333,20.6666667 L18.0833333,20.6666667 L12.9166667,10.3333333 L10.3333333,10.3333333 C7.49166667,10.3333333 5.1925,12.6583333 5.1925,15.5 L5.16666667,46.5 C5.16666667,49.3416667 7.49166667,51.6666667 10.3333333,51.6666667 L51.6666667,51.6666667 C54.5083333,51.6666667 56.8333333,49.3416667 56.8333333,46.5 L56.8333333,10.3333333 Z'
  />
</svg>

第二个：

<svg viewBox="0 0 60 60">
  <path
    d='M21,2 L3,2 C1.9,2 1,2.9 1,4 L1,16 C1,17.1 1.9,18 3,18 L10,18 L10,20 L8,20 L8,22 L16,22 L16,20 L14,20 L14,18 L21,18 C22.1,18 23,17.1 23,16 L23,4 C23,2.9 22.1,2 21,2 Z M21,16 L3,16 L3,4 L21,4 L21,16 Z'
  />
</svg>

问题是我需要两个完全相同的 viewBox（这里是 0 0 60 60），但是当我像这样设置它时，第二个图标比第一个小得多。我想让它们看起来相同（大小），同时拥有相同的 viewBox。我在这里错过了什么？

【问题讨论】：

将宽高属性放入svg

标签： javascript svg

【解决方案1】：

你可以放width和height属性，但还是不能解决问题

    <svg viewBox="0 0 60 60" width="60" height="60">
  <path d="M10.3333333,16.7141667 L14.88,25.8333333 L51.6666667,25.8333333 L51.6666667,46.5 L10.3333333,46.5 L10.3333333,16.7141667 Z M56.8333333,10.3333333 L46.5,10.3333333 L51.6666667,20.6666667 L43.9166667,20.6666667 L38.75,10.3333333 L33.5833333,10.3333333 L38.75,20.6666667 L31,20.6666667 L25.8333333,10.3333333 L20.6666667,10.3333333 L25.8333333,20.6666667 L18.0833333,20.6666667 L12.9166667,10.3333333 L10.3333333,10.3333333 C7.49166667,10.3333333 5.1925,12.6583333 5.1925,15.5 L5.16666667,46.5 C5.16666667,49.3416667 7.49166667,51.6666667 10.3333333,51.6666667 L51.6666667,51.6666667 C54.5083333,51.6666667 56.8333333,49.3416667 56.8333333,46.5 L56.8333333,10.3333333 Z"></path>
</svg>

和

<svg viewBox="0 0 60 60" width="60" height="60">
  <path d="M21,2 L3,2 C1.9,2 1,2.9 1,4 L1,16 C1,17.1 1.9,18 3,18 L10,18 L10,20 L8,20 L8,22 L16,22 L16,20 L14,20 L14,18 L21,18 C22.1,18 23,17.1 23,16 L23,4 C23,2.9 22.1,2 21,2 Z M21,16 L3,16 L3,4 L21,4 L21,16 Z"></path>
</svg>

您可以在 ilustrator 中打开 svg 并将路径调整为 60x60px

【讨论】：

是的，我刚刚将它调整为 60x60，它工作得很好

【解决方案2】：

第二个 SVG 有更多的空白，路径仅覆盖视图框的左上角。

添加边框显示：

<svg viewBox="0 0 60 60" style="border:solid 1px red">
  <path
    d='M10.3333333,16.7141667 L14.88,25.8333333 L51.6666667,25.8333333 L51.6666667,46.5 L10.3333333,46.5 L10.3333333,16.7141667 Z M56.8333333,10.3333333 L46.5,10.3333333 L51.6666667,20.6666667 L43.9166667,20.6666667 L38.75,10.3333333 L33.5833333,10.3333333 L38.75,20.6666667 L31,20.6666667 L25.8333333,10.3333333 L20.6666667,10.3333333 L25.8333333,20.6666667 L18.0833333,20.6666667 L12.9166667,10.3333333 L10.3333333,10.3333333 C7.49166667,10.3333333 5.1925,12.6583333 5.1925,15.5 L5.16666667,46.5 C5.16666667,49.3416667 7.49166667,51.6666667 10.3333333,51.6666667 L51.6666667,51.6666667 C54.5083333,51.6666667 56.8333333,49.3416667 56.8333333,46.5 L56.8333333,10.3333333 Z'
  />
</svg>

<svg viewBox="0 0 60 60" style="border:solid 1px red">
  <path
    d='M21,2 L3,2 C1.9,2 1,2.9 1,4 L1,16 C1,17.1 1.9,18 3,18 L10,18 L10,20 L8,20 L8,22 L16,22 L16,20 L14,20 L14,18 L21,18 C22.1,18 23,17.1 23,16 L23,4 C23,2.9 22.1,2 21,2 Z M21,16 L3,16 L3,4 L21,4 L21,16 Z'
  />
</svg>

您可以：

将视图框缩小到大约 25x25 的视图框，并改用 HTML/CSS 设置高度/宽度的样式
编辑 SVG 并让它填充 60x60 的视图框

【讨论】：