svg - 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>

标签： svgsafari

Answer 1

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