Safari не показывает SVG со скрытой видимостью для родителей, но не для детей - PullRequest
Новая
       10

Safari не показывает SVG со скрытой видимостью для родителей, но не для детей

0 голосов
/ 05 апреля 2019

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