CODEWITHSUNDEEP
javascripthtmlcsssvg
davidx1
davidx1

Reputation: 3673

SVG turns into a black box if another instance is hidden

I have two divs each containing an instances of the same svg.

When I set the first div to "display: none", the svg in the second div turns into a grey box.

This is happening in both firefox and chrome.

Why is this happening and what can I do to get around it?

Here's some sample code:

P.S. I was given the svg by our designer.

(EDIT: I'm on Chrome Version 64.0.3282.167 and Firefox 45.9.0. Also, In the actual project. I'm importing the SVG as a React Component. So any change to the SVG will appear in both instances)

$("#button").click(function(){
  $("#firstDiv").css("display","none");
})

$("#button2").click(function(){
  $("#firstDiv").css("display","inherit");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 

<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
<?xml version="1.0" encoding="utf-8"?>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
	.st0{filter:url(#Adobe_OpacityMaskFilter);}
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_1_);}
	.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
	<g id="Group-44" transform="translate(0.000000, 1495.000000)">
		<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
			<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
			</g>
			<defs>
				<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
				</filter>
			</defs>
			<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
				<g class="st0">
					<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
						L6.8,8.2l1.4-1.4L16,14.6z"/>
				</g>
			</mask>
			<g id="Color_x2F_Dark-Grey" class="st2">
				
					<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
			</g>
		</g>
	</g>
</g>
</svg>
</div>
  <div>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
	.st0{filter:url(#Adobe_OpacityMaskFilter);}
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_1_);}
	.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
	<g id="Group-44" transform="translate(0.000000, 1495.000000)">
		<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
			<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
			</g>
			<defs>
				<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
				</filter>
			</defs>
			<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
				<g class="st0">
					<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
						L6.8,8.2l1.4-1.4L16,14.6z"/>
				</g>
			</mask>
			<g id="Color_x2F_Dark-Grey" class="st2">
				
					<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
			</g>
		</g>
	</g>
</g>
</svg>
</div>

Upvotes: 4

Views: 2134

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

There is no need to repeat the cross SVG in every <div>. You can tidy the page (and reduce its size) by including the Cross SVG once and referencing it in each div with a <use> element.

$("#button").click(function(){
  $("#firstDiv").css("display","none");
})

$("#button2").click(function(){
  $("#firstDiv").css("display","block");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 


<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
  <svg width="100" height="100" id="close" viewBox="0 0 20 20">
    <use xlink:href="#Cross"/>
  </svg>
</div>

<div>
  <svg width="100" height="100" id="close" viewBox="0 0 20 20">
    <use xlink:href="#Cross"/>
  </svg>
</div>


<!-- hide the referenced SVG on the page by setting its width and height to 0 -->
<svg width="0" height="0" viewBox="0 0 20 20">
<style type="text/css">
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_1_1);}
	.st3{fill:#666666;}
</style>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
	<g id="Group-44" transform="translate(0.000000, 1495.000000)">
		<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
			<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
			</g>
			<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_1">
				<g class="st0">
					<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
						L6.8,8.2l1.4-1.4L16,14.6z"/>
				</g>
			</mask>
			<g id="Color_x2F_Dark-Grey" class="st2">
					<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
			</g>
		</g>
	</g>
</g>
</svg>

Upvotes: 2

Kosh
Kosh

Reputation: 18393

You cannot have several elements (even within svg containers) with the same id. id should be unique.

See the snippet:

$("#button").click(function(){
  $("#firstDiv").css("display","none");
})

$("#button2").click(function(){
  $("#firstDiv").css("display","block");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 

<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">

<svg height="100" version="1.1" id="Layer_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
	.st0{filter:url(#Adobe_OpacityMaskFilter0);}
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_1_1);}
	.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
	<g id="Group-44" transform="translate(0.000000, 1495.000000)">
		<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
			<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
			</g>
			<defs>
				<filter id="Adobe_OpacityMaskFilter0" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
				</filter>
			</defs>
			<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_1">
				<g class="st0">
					<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
						L6.8,8.2l1.4-1.4L16,14.6z"/>
				</g>
			</mask>
			<g id="Color_x2F_Dark-Grey" class="st2">
				
					<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
			</g>
		</g>
	</g>
</g>
</svg>
</div>

<div>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 20 20" sstyle="enable-background:new 0 0 20 20;" xxml:sspace="preserve">
<style type="text/css">
	.st0{filter:url(#Adobe_OpacityMaskFilter);}
	.st1{fill:#FFFFFF;}
	.st2{mask:url(#mask-2_1_);}
	.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
	<g id="Group-44" transform="translate(0.000000, 1495.000000)">
		<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
			<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
			</g>
			<defs>
				<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
					<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
				</filter>
			</defs>
			<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
				<g class="st0">
					<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
						L6.8,8.2l1.4-1.4L16,14.6z"/>
				</g>
			</mask>
			<g id="Color_x2F_Dark-Grey" class="st2">
				
					<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
			</g>
		</g>
	</g>
</g>
</svg>
</div>

If it's used as a 'delete' icon, your svg is overcomplicated. There should not be any masks, groups, styles, defs etc. It should be like this: 

svg {width:50px; fill:#777}
<svg viewBox="0 0 96 96"><path d="M96 14L82 0 48 34 14 0 0 14l34 34L0 82l14 14 34-34 34 34 14-14-34-34z"/></svg>

Upvotes: 3

Related Questions