SVG 在没有高度属性的 Safari 上不可见，但问题无法重新创建？

Question

我的网站中有一个 SVG，它在 Chrome 上显示正常，但在 Safari 和 Mobile Safari 上不可见。

奇怪的是，如果我将 SVG 复制并粘贴到 Codepen 页面中，那么它就可以正常工作，因此我无法公开重新创建该问题。

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>

设置height 100%为属性可以修复 Safari 中的问题，并且不会使其尺寸或纵横比错误。

这里发生了什么？为什么这个方法有效并且是一个安全的修复方法？还有为什么这个问题无法重现？

更新：我现在能够重新创建。当 Safari 的父 div 具有以下内容时，Safari 会隐藏 SVG display: flex：

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/yLPgaJx

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" aria-hidden="true" focusable="false" role="img"><path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"></path></svg>
</div>

如果我将容器 div 设置为display: block或在 SVG 上设置高度，那么它就会回来。

Answer 1

正如评论@Evanss

另外，高度自动不会使 SVG 出现，但高度 100% 会出现。

宽度=“22”高度=“100%”

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="100%"  aria-hidden="true" focusable="false" role="img" style="border:1px solid red">

  <path fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
  </svg>

上面的代码片段无法正确渲染图像，但如果将 svg 保存为单独的文件并在浏览器中打开它，您将看到完全相同的图像。

在下图中，红色矩形是 svg 画布的边框，带有width="22"和height="100%"

正如您所看到的，使用此 SVG 配置时，填充太大。什么是不可接受的并且会干扰布局

使用 JavaScript 不是一个好主意，因为它可能会导致页面闪烁

使用代码片段控制台中的 JavaScript 方法getBBox() 可以让您找出 svg 形状的物理尺寸。在这种情况下，JS 不参与 SVG 渲染过程，只是一个参考工具。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 512" width="22" height="100%" aria-hidden="true" focusable="false" role="img" style="border:1px solid red">
  <path id="path" fill="currentColor" d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z">
  </path>
 </svg>
 <script>
   console.log(path.getBBox())
 </script>

在控制台中，我们可以看到物理尺寸（由svg形状的路径给出的尺寸）

  "x": 0,
  "y": 31.999996185302734,
  "width": 448,
  "height": 448

要将图像移动到左上角（这是 svg s origin) we set the value viewBox="0 32 448 448"` 并且为了减少边距，我们设置固定值 width="22" height="22"

创建和使用图标的建议

设置两个尺寸将非常耗时，因为我有很多具有相同问题的图标。

1. 如果您使用的是设计师创建的一些独特的图标，那么您无法避免上述每个图标的手动定位和缩放过程。

对于这种情况没有通用的解决方案。这完全取决于图标的绘制方式。

2. 如果图标简单、标准，那么最好使用专业人士绘制的图标。网络上有很多此类资源。
   在这种情况下，不需要手动、额外的处理。

3. 您可以使用google-fonts 字符字体

可以在此处按名称选择
图标 图标的名称 -关闭“全屏”

下面是一个最小布局的示例

  "x": 0,
  "y": 31.999996185302734,
  "width": 448,
  "height": 448

span {
  margin-left: 0.5em;
  margin-top:0.5em;
  transition: transform 1s ease-in-out;
}
span:hover {
  transform: scale(2); 
  color:red;
}