Safari未显示父级但子级未隐藏可见性的SVG

Question

SVG的可见性设置为隐藏，但其子级设置为可见，因此不会在Safari中加载。其他所有的Chrome，Firefox和IE都可以。

此处采样

svg {
	width: 100px;
	border: 1px solid green
}
svg:hover {
	opacity: 0.5
}
.c {
visibility:hidden}
.c * {
	visibility: visible;
}

<p>Need to create grid with 6 sided shape. Each shape needs a hover state and said hover state needs to be happen on the shape not the bounding box of the element.</p>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279 322.16">
	<title>
		svg1
	</title>

	<g>
		<path d="M0 80.54 0 241.62 139.5 322.16 279 241.62 279 80.54 139.5 0 0 80.54z" class="cls-1" />
	</g>
</svg>
<br /><br />
<p>One way to achieve this is to have the SVG element Visibility set to hidden but then make the children of the SVG visible. </p>
<p style="color: red"> The problem i have is that in Safari, the SVG disapears. Have tried adding visibility=visible to each of the elements in the SVG and still safari won't show them. Any help on this would be much appeciated.</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279 322.16" class="c">
	<title>
		svg2
	</title>

	<g>
		<path d="M0 80.54 0 241.62 139.5 322.16 279 241.62 279 80.54 139.5 0 0 80.54z" class="cls-1" />
	</g>
</svg>

Answer 1

对我来说有助于将 visibility: hidden/visible 替换为 opacity: 0 / 1。