没有高度属性的 Safari 上的 SVG 不可见，但问题不可重现？
SVG invisible on Safari without height attribute, but issue not recreatable?
我的网站上有一个 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 和 display: flex:
的父项时，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 上设置高度，它就会返回。
你有两次 SVG 的高度。在视图样式中 hight="100%" 和 style="height: auto;"
safari 不知道喜欢哪种风格，如何缩放 SVG，所以它不显示图像。
留下一种风格：width="22" height="auto"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="auto" 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>
更新
尝试根据JS方法getBBox()显示的维度设置`viewBox="0 32 448 448"的值
并且还指定固定宽度和高度的视口 width="22" height="22"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 448" width="22" height="22" 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>
如评论@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 另存为一个单独的文件并在浏览器中打开它，您将看到完全相同的图像。
在下图中，红色矩形是 svg canvas 与 width="22" 和 height="100%"
的边框
如您所见，使用此 SVG 配置，填充太大。什么是不可接受的，会干扰布局
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
要将图像移动到左上角（这是 svgs origin) we set the value viewBox="0 32 448 448"` 并且要减少边距我们设置固定值 width="22" height= “22”
创建和使用图标的建议
Setting both dimensions would be very time consuming as I have a lot
of icons with the same issue.
- 如果您使用的是设计师创建的一些独特图标，则无法避免上述每个图标的手动定位和缩放过程。
这种情况没有通用的解决方案。这完全取决于图标的绘制方式。
如果图标简单、标准，那么最好使用专业人士绘制的图标。网上有很多这样的资源。
在这种情况下，不需要手动进行额外处理。
-
可以按名称选择图标here
您的图标名称 - 关闭`全屏
下面是一个最小布局的例子
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>
在我的例子中，添加 svg 属性 width="40" 和 height="auto" 让 Safari 正确显示 svgs：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.8 503.8" width="40" height="auto">
<style>.st0{fill:currentcolor}</style>
<path d="M251.9 45.4c67.3 0 75.3.2 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.6a79.6 79.6 0 0 1 29 18.9 78.2 78.2 0 0 1 18.8 28.9c3.5 8.9 7.6 22.3 8.7 46.8 1.2 26.6 1.5 34.6 1.5 101.8s-.3 75.3-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8a83.4 83.4 0 0 1-47.8 47.8c-8.9 3.5-22.2 7.6-46.8 8.7-26.5 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.5-1.1-37.9-5.2-46.8-8.7a78.2 78.2 0 0 1-28.9-18.8 79.6 79.6 0 0 1-18.9-29c-3.4-8.9-7.5-22.2-8.6-46.8-1.3-26.5-1.5-34.5-1.5-101.8s.2-75.2 1.5-101.8c1.1-24.5 5.2-37.9 8.6-46.8a78.4 78.4 0 0 1 18.9-28.9 78.4 78.4 0 0 1 28.9-18.9c8.9-3.4 22.3-7.5 46.8-8.6 26.6-1.3 34.6-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.8 1.5S102.9 7 86.9 13.2a124.9 124.9 0 0 0-44.6 29.1 123.6 123.6 0 0 0-29.1 44.6c-6.2 16-10.5 34.3-11.7 61.2S0 183.5 0 251.9s.3 77 1.5 103.9 5.5 45.1 11.7 61.1a125.3 125.3 0 0 0 29.1 44.7 123.4 123.4 0 0 0 44.6 29c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.8 1.5 77-.2 103.9-1.5 45.1-5.5 61.1-11.7a128.6 128.6 0 0 0 73.7-73.7c6.2-16 10.5-34.3 11.7-61.1s1.5-35.5 1.5-103.9-.2-77-1.5-103.8-5.5-45.2-11.7-61.2a123.4 123.4 0 0 0-29-44.6 123.1 123.1 0 0 0-44.7-29.1c-16-6.2-34.3-10.5-61.1-11.7S320.3 0 251.9 0Z"></path>
<path d="M251.9 122.6a129.4 129.4 0 1 0 129.4 129.3 129.3 129.3 0 0 0-129.4-129.3Zm0 213.3a84 84 0 1 1 84-84 84 84 0 0 1-84 84Z"></path>
<circle cx="386.4" cy="117.4" r="30.2"></circle>
</svg>
我的网站上有一个 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 和 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 上设置高度，它就会返回。
你有两次 SVG 的高度。在视图样式中 hight="100%" 和 style="height: auto;"
safari 不知道喜欢哪种风格，如何缩放 SVG，所以它不显示图像。
留下一种风格：width="22" height="auto"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22" height="auto" 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>
更新
尝试根据JS方法getBBox()显示的维度设置`viewBox="0 32 448 448"的值
并且还指定固定宽度和高度的视口 width="22" height="22"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 32 448 448" width="22" height="22" 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>
如评论@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 另存为一个单独的文件并在浏览器中打开它，您将看到完全相同的图像。
在下图中，红色矩形是 svg canvas 与 width="22" 和 height="100%"
如您所见，使用此 SVG 配置，填充太大。什么是不可接受的，会干扰布局
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
要将图像移动到左上角（这是 svgs origin) we set the value viewBox="0 32 448 448"` 并且要减少边距我们设置固定值 width="22" height= “22”
创建和使用图标的建议
Setting both dimensions would be very time consuming as I have a lot of icons with the same issue.
- 如果您使用的是设计师创建的一些独特图标，则无法避免上述每个图标的手动定位和缩放过程。
这种情况没有通用的解决方案。这完全取决于图标的绘制方式。
如果图标简单、标准，那么最好使用专业人士绘制的图标。网上有很多这样的资源。
在这种情况下，不需要手动进行额外处理。
可以按名称选择图标here
您的图标名称 - 关闭`全屏
下面是一个最小布局的例子
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>
在我的例子中，添加 svg 属性 width="40" 和 height="auto" 让 Safari 正确显示 svgs：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.8 503.8" width="40" height="auto">
<style>.st0{fill:currentcolor}</style>
<path d="M251.9 45.4c67.3 0 75.3.2 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.6a79.6 79.6 0 0 1 29 18.9 78.2 78.2 0 0 1 18.8 28.9c3.5 8.9 7.6 22.3 8.7 46.8 1.2 26.6 1.5 34.6 1.5 101.8s-.3 75.3-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8a83.4 83.4 0 0 1-47.8 47.8c-8.9 3.5-22.2 7.6-46.8 8.7-26.5 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.5-1.1-37.9-5.2-46.8-8.7a78.2 78.2 0 0 1-28.9-18.8 79.6 79.6 0 0 1-18.9-29c-3.4-8.9-7.5-22.2-8.6-46.8-1.3-26.5-1.5-34.5-1.5-101.8s.2-75.2 1.5-101.8c1.1-24.5 5.2-37.9 8.6-46.8a78.4 78.4 0 0 1 18.9-28.9 78.4 78.4 0 0 1 28.9-18.9c8.9-3.4 22.3-7.5 46.8-8.6 26.6-1.3 34.6-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.8 1.5S102.9 7 86.9 13.2a124.9 124.9 0 0 0-44.6 29.1 123.6 123.6 0 0 0-29.1 44.6c-6.2 16-10.5 34.3-11.7 61.2S0 183.5 0 251.9s.3 77 1.5 103.9 5.5 45.1 11.7 61.1a125.3 125.3 0 0 0 29.1 44.7 123.4 123.4 0 0 0 44.6 29c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.8 1.5 77-.2 103.9-1.5 45.1-5.5 61.1-11.7a128.6 128.6 0 0 0 73.7-73.7c6.2-16 10.5-34.3 11.7-61.1s1.5-35.5 1.5-103.9-.2-77-1.5-103.8-5.5-45.2-11.7-61.2a123.4 123.4 0 0 0-29-44.6 123.1 123.1 0 0 0-44.7-29.1c-16-6.2-34.3-10.5-61.1-11.7S320.3 0 251.9 0Z"></path>
<path d="M251.9 122.6a129.4 129.4 0 1 0 129.4 129.3 129.3 129.3 0 0 0-129.4-129.3Zm0 213.3a84 84 0 1 1 84-84 84 84 0 0 1-84 84Z"></path>
<circle cx="386.4" cy="117.4" r="30.2"></circle>
</svg>