SVG 路径大于 svg 容器答案

【问题标题】：SVG path is bigger than the svg containerSVG 路径大于 svg 容器
【发布时间】：2021-07-04 11:42:10
【问题描述】：

所以我有一个非常奇怪的案例（至少对我来说非常奇怪）。

SVG 路径未包含在 SVG 元素中。我已经尝试了很多方法来让它工作，但都没有工作，现在怀疑我错过了一些东西。

我有一个 JS 小提琴：https://jsfiddle.net/67w3hays/

如您所见 - youtube 图标比容器大，并且无法放入容器中

代码：

<a href="" class="social-link" target="_blank" rel="noopener noreferrer">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">

            <path class="youtubeSVG" d="M35.705 0S13.354 0 7.765 1.47c-3 .824-5.47 3.295-6.294 6.354C0 13.412 0 25 0 25s0 11.646 1.47 17.176a8.95 8.95 0 006.296 6.295C13.413 50 35.706 50 35.706 50s22.352 0 27.94-1.47a8.95 8.95 0 006.295-6.296c1.471-5.588 1.471-17.175 1.471-17.175s.059-11.647-1.47-17.235a8.95 8.95 0 00-6.296-6.295C58.058 0 35.706 0 35.706 0zm-7.117 14.295L47.176 25 28.588 35.705v-21.41z"/>
          
        </svg>
      </a>

期望的答案结果：

我希望此 SVG 路径适合 18 宽和高的容器（或接近 18px 高度的纵横比）。

【问题讨论】：

标签： html css svg

【解决方案1】：

https://jsfiddle.net/hdqL3a4z/

去掉svg标签上的width和height，只留下视口：

<svg viewBox="0 0 71.41 50" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">

并在 CSS 上设置缩放：

a > svg {
  width: 18px;
  height: auto;
}

【讨论】：

太棒了 - 非常感谢你（这让我发疯了......） - 附带说明 - 是否有理由将 viewBox 保留为比所需数量更大的数量？即 18px - 有关该主题的任何文档都会非常有帮助 - 再次感谢
我今天从这个资源中学到了：css-tricks.com/scale-svg/#the-viewbox-attribute
viewBox 定义了纵横比，所以任何x / y 和x / y == 71.41 / 50 都会有相同的结果。