Internet Explorer无法识别SVG元素的CSS

问题描述 投票：2回答：1

我有一个SVG图像映射，链接上有悬停样式。

（更多关于SVG图像地图here。）

我测试过的所有可敬的浏览器都正确显示它。

IE没有任何（惊喜！）......

（我只关心IE11，而不是超级版本。）

感谢this answer to a similar question，我知道IE可以显示剪切路径，只要它们是SVG标记的一部分，而不是添加CSS样式。

在我的例子中，因为它是一个图像映射，剪切路径在锚标记内。也许这就是为什么IE混淆了，但我没有读到它不受支持的任何地方。

这是我的（确认在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>

如果您在上述非IE浏览器中运行代码段，您应该会看到在悬停时出现铅笔的颜色。

Image credit: Pixabay

是否可以采取不同的方式让IE识别剪辑路径链接？

更新：

我取得了一些进展。我在IE11中有一个单独的测试文件！

现在我只需弄清楚它的成败之处是什么。

下面是一个代码片段，其中包含（1）多边形路径，（2）作为链接的多边形路径，以及（3）作为链接的多边形剪辑路径：

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

更新2

我已经把问题缩小到IE而不喜欢我的CSS。

这是一个片段，其中剪辑路径上的链接正在运行，但CSS被注释掉了。一旦CSS重新启用它就会中断。 （为简单起见，此背景图片已被删除。）

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

所以现在我想知道是否可能是因为我放置了CSS，或者在SVG内部时IE可能无法识别某些类型的CSS。测试继续......

在这一点上，我认为更改这个问题的标题更合适

让Internet Explorer识别SVG中的剪辑路径链接

至

Internet Explorer无法识别SVG元素的CSS

根据<style>的说法，自9版以来，IE显然对<svg>内部的this page有“全面的基本支持”。所以我真的很想知道它对我的CSS有什么不满。 a:hover不是一个特别异国情调的选择者......

添加/* <![CDATA[ */（如该示例中所示）也没有解决问题。

以下是在IE11中工作的CSS :hover实现的两个示例：

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

* CodePen不支持IE，但如果在HTML文件中准备，则悬停样式有效。

css svg css-transitions internet-explorer-11 imagemap
1个回答
1
投票

答案是...

对于SVG中的不透明度转换，IE需要大于零的不透明度！

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

否则它就会抛出它，就像“heyyyyy，不会需要这个看不见的东西！”尽管被告知期待过渡：transition-property: opacity;

这是一个片段，在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.