没有高度属性的 Safari 上的 SVG 不可见，但问题不可重现？

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 有一个带有 display: flex:

的父 div 时，Safari 会隐藏 SVG:

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

Also height auto doens't make the SVG appear, but height 100% does.

width="22"height="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 另存为一个单独的文件并在浏览器中打开它，您将看到完全相同的图像。

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

如您所见，对于这种 SVG 配置，填充太大。什么是 Not Acceptable ，会干扰布局

Using JavaScript isnt idea as it may cause the page to flicker

在代码段控制台中使用 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 的原点)，我们设置值 viewBox="0 32 448 448"` 并且为了减少边距我们设置固定值宽度="22"高度="22"

创建和使用图标的建议

Setting both dimensions would be very time consuming as I have a lotof icons with the same issue.

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

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

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

2. 您可以使用 google-fonts character font

可以按名称选择图标here
您的图标名称 - Close `Fullscreen

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

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span class="material-icons"> close_fullscreen </span>