Internet Explorer not recognizing CSS for SVG elem

2020-06-28 00:37发布

站内问答 / HTML/CSS
1352 1 5

I have an SVG image map with hover styles on the links.

(More on SVG image maps here.)

All respectable browsers I've tested on are displaying it correctly.

IE is not having any of it (surprise!)...

(I'm only concerned with IE11, not super-archaic versions.)

Thanks to this answer to a similar question, I know that IE can display clipping paths as long as they are part of the SVG markup and not added with CSS styling.

In my case, since it's an image map, the clipping paths are inside anchor tags. Maybe this is why IE is confused, but I haven't read anywhere that it isn't supported.

Here is what I have (confirmed working in Firefox, Chrome, Safari, Opera):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; margin: auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
	<defs>
		<filter id="desaturate">
			<feColorMatrix 
				type='matrix' 
				values="0 1 0 0 0
						0 1 0 0 0
						0 1 0 0 0
						0 1 0 1 0 "
			/>
		</filter>
		
		<style type="text/css">
			a:link,
			a:visited {
				opacity: 0;
			}
			a:hover,
			a:active {
				opacity: 1;
				transition-property: opacity;
				transition-duration: 0.4s;
				transition-timing-function: ease-in-out;
			}
			
			.desaturated {
				filter:url("#desaturate");
			}
		</style>
		
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>

	<a xlink:href="">
		<g id="_1-2" data-name="1">
			<g clip-path="url(#clip-path)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_2-2" data-name="2">
			<g clip-path="url(#clip-path-2)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_3-2" data-name="3">
			<g clip-path="url(#clip-path-3)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_4-2" data-name="4">
			<g clip-path="url(#clip-path-4)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_5-2" data-name="5">
			<g clip-path="url(#clip-path-5)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_6-2" data-name="6">
			<g clip-path="url(#clip-path-6)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_7-2" data-name="7">
			<g clip-path="url(#clip-path-7)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_8-2" data-name="8">
			<g clip-path="url(#clip-path-8)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_9-2" data-name="9">
			<g clip-path="url(#clip-path-9)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_10-2" data-name="10">
			<g clip-path="url(#clip-path-10)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_11-2" data-name="11">
			<g clip-path="url(#clip-path-11)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_12-2" data-name="12">
			<g clip-path="url(#clip-path-12)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
</svg>
</div>
</body>
</html>

If you run the code snippet in the aforementioned non-IE browsers, you should see the colors of the pencils appear upon hovering.

Image credit: Pixabay

Can something be done differently to get IE to recognize the clip-path links?

Update:

I've made some progress. I got a separate test file working in IE11!

Now I just have to figure out what the difference is that makes or breaks it.

Below is a code snippet with (1) a polygon path, (2) a polygon path that is a link, and (3) a polygon clip-path that is a link:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 512px; height: 512px; margin: 20px auto;">
<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
	<defs>
		<clipPath id="clip-path">
			<polygon id="hexa3" points="316 256 196 256 136 360 196 464 316 464 376 360 316 256" fill="none"/>
		</clipPath>
	</defs>
	<rect id="bg" width="512" height="512" fill="#b9b8c1"/>
	<a xlink:href="#">
		<g id="clip_group">
			<g clip-path="url(#clip-path)">
				<image id="img" width="960" height="640" transform="translate(24 204) scale(0.48 0.48)" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="hexa2">
			<polygon points="436 48 316 48 256 152 316 256 436 256 496 152 436 48" fill="#c4fffb"/>
		</g>
	</a>
	<g id="hexa1">
		<polygon points="196 48 76 48 16 152 76 256 196 256 256 152 196 48" fill="#eaffaf"/>
	</g>
</svg>
</div>
</body>
</html>

Update 2

I've narrowed down the problem to IE not liking my CSS.

Here is a snippet where the links on clip-paths are working but the CSS is commented out. As soon as the CSS is re-enabled it breaks. (The background image has been removed in this one for the sake of simplicity.)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 320px; margin: 20px auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
	<defs>
		<!-- <style type="text/css">
			a:link,
			a:visited {
				opacity: 0;
			}
			a:hover,
			a:active {
				opacity: 1;
				transition-property: opacity;
				transition-duration: 0.4s;
				transition-timing-function: ease-in-out;
			}
		</style> -->
		
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<!-- <use id="bw_img" xlink:href="#image"/> -->

	<a xlink:href="#">
		<g id="clip_1">
			<g clip-path="url(#clip-path)">
				<use id="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_2">
			<g clip-path="url(#clip-path-2)">
				<use id="color_img-2" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_3">
			<g clip-path="url(#clip-path-3)">
				<use id="color_img-3" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_4">
			<g clip-path="url(#clip-path-4)">
				<use id="color_img-4" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_5">
			<g clip-path="url(#clip-path-5)">
				<use id="color_img-5" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_6">
			<g clip-path="url(#clip-path-6)">
				<use id="color_img-6" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_7">
			<g clip-path="url(#clip-path-7)">
				<use id="color_img-7" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_8">
			<g clip-path="url(#clip-path-8)">
				<use id="color_img-8" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_9">
			<g clip-path="url(#clip-path-9)">
				<use id="color_img-9" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_10">
			<g clip-path="url(#clip-path-10)">
				<use id="color_img-10" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_11">
			<g clip-path="url(#clip-path-11)">
				<use id="color_img-11" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_12">
			<g clip-path="url(#clip-path-12)">
				<use id="color_img-12" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
</svg>
</div>
</body>
</html>

So now I am wondering if maybe it's because of where I've placed the CSS, or maybe certain kinds of CSS are unrecognized by IE when inside an SVG. The testing continues...

At this point I think it's more appropriate to change the title of this question from

Getting Internet Explorer to recognize clip-path links inside SVG

to

Internet Explorer not recognizing CSS for SVG elements

Also, IE apparently has "full basic support" for <style> inside of <svg> since version 9, according to this page. So I'm really wondering what it hates about my CSS. a:hover isn't a particularly exotic selector...

Adding /* <![CDATA[ */ (as is shown in that example) hasn't fixed the problem either.

Here are two examples of CSS :hover implementation that work in IE11:

  1. Stack Overflow: SVG CSS Hover Styling
  2. CodePen: CSS SVG hover color*

*CodePen doesn't support IE, but that hover styling works if prepared in an HTML file.

1条回答
小情绪 Triste *
2楼-- · 2020-06-28 01:23

The answer is...

For opacity transitions in an SVG, IE needs an opacity greater than zero!

a.hover_area:link, a.hover_area:visited {opacity: 0.001}

Otherwise it just throws it out, like "heyyyyy, won't be needing this invisible thing!" despite having been told to expect a transition: transition-property: opacity;

Here's a snippet, working in IE11:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 640px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->

<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">

	<filter id="desaturate">
		<feColorMatrix 
			type='matrix' 
			values="0 1 0 0 0
					0 1 0 0 0
					0 1 0 0 0
					0 1 0 1 0 "
		/>
	</filter>
	
	<style type="text/css">
		/* <![CDATA[ */
		a.hover_area:link,
		a.hover_area:visited {
			opacity: 0.001; /* Must be greater than 0 for IE! */
		}
		a.hover_area:hover,
		a.hover_area:active {
			opacity: 1;
			transition-property: opacity;
			transition-duration: 0.4s;
			transition-timing-function: ease-in-out;
		}
		
		.desaturated {
			filter:url("#desaturate");
		}
		/* ]]> */
	</style>

	<defs>
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>

	<a xlink:href="#" class="hover_area">
		<g id="_1-2" data-name="1">
			<g clip-path="url(#clip-path)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_2-2" data-name="2">
			<g clip-path="url(#clip-path-2)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_3-2" data-name="3">
			<g clip-path="url(#clip-path-3)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_4-2" data-name="4">
			<g clip-path="url(#clip-path-4)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_5-2" data-name="5">
			<g clip-path="url(#clip-path-5)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_6-2" data-name="6">
			<g clip-path="url(#clip-path-6)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_7-2" data-name="7">
			<g clip-path="url(#clip-path-7)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_8-2" data-name="8">
			<g clip-path="url(#clip-path-8)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_9-2" data-name="9">
			<g clip-path="url(#clip-path-9)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_10-2" data-name="10">
			<g clip-path="url(#clip-path-10)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_11-2" data-name="11">
			<g clip-path="url(#clip-path-11)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_12-2" data-name="12">
			<g clip-path="url(#clip-path-12)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
</svg>

</div>
</body>
</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)