Internet Explorer 无法识别 CSS SVG 元素
Internet Explorer not recognizing CSS for SVG elements
我在 link 上有一个带有悬停样式的 SVG 图像映射。
（更多关于 SVG 图像映射 here。）
我测试过的所有受人尊敬的浏览器都可以正确显示它。
IE 没有任何内容（惊喜！）...
（我只关心IE11，不关心super-archaic版本。）
感谢 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>
如果您在上述 non-IE 浏览器中 运行 代码片段，您应该会在悬停时看到铅笔的颜色。
是否可以采取不同的方式让 IE 识别 clip-path link？
更新：
我取得了一些进步。我在 IE11 中有一个单独的测试文件！
现在我只需要弄清楚它的成败之处是什么。
下面是一个代码片段，其中 (1) 多边形路径，(2) 多边形路径 link，和 (3) 多边形 clip-path 即 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>
更新 2
我已将问题缩小到 IE 不喜欢我的 CSS。
这是一个片段，其中 clip-path 上的 link 可以正常工作，但 CSS 被注释掉了。一旦 CSS 为 re-enabled，它就会中断。 （为了简单起见，背景图片已在这一张中删除。）
<!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，或者可能是 某些种类 of CSS 在 SVG 中时无法被 IE 识别。测试继续...
此时我觉得把这个问题的标题改成
更合适
让 Internet Explorer 识别 SVG 中的 clip-path links
到
Internet Explorer 无法识别 CSS SVG 元素
此外，根据 this page，自版本 9 以来，IE 显然在 <svg> 内部具有 "full basic support" for <style>。所以我真的很想知道它讨厌什么 my CSS。 a:hover 不是一个特别奇特的选择器...
添加 /* <![CDATA[ */（如该示例所示）也没有解决问题。
以下是在 IE11 中工作的 CSS :hover 实现的两个示例：
*CodePen 不支持 IE，但如果在 HTML 文件中准备好悬停样式，则该样式有效。
答案是...
对于 SVG 中的不透明度过渡，IE 需要大于零的不透明度！
a.hover_area:link, a.hover_area:visited {opacity: 0.001}
否则它会把它扔掉，比如 "heyyyyy, won't be needing this invisible thing!" 尽管被告知要进行转换：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>
我在 link 上有一个带有悬停样式的 SVG 图像映射。
（更多关于 SVG 图像映射 here。）
我测试过的所有受人尊敬的浏览器都可以正确显示它。
IE 没有任何内容（惊喜！）...
（我只关心IE11，不关心super-archaic版本。）
感谢 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>
如果您在上述 non-IE 浏览器中 运行 代码片段，您应该会在悬停时看到铅笔的颜色。
是否可以采取不同的方式让 IE 识别 clip-path link？
更新：
我取得了一些进步。我在 IE11 中有一个单独的测试文件！
现在我只需要弄清楚它的成败之处是什么。
下面是一个代码片段，其中 (1) 多边形路径，(2) 多边形路径 link，和 (3) 多边形 clip-path 即 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>
更新 2
我已将问题缩小到 IE 不喜欢我的 CSS。
这是一个片段，其中 clip-path 上的 link 可以正常工作，但 CSS 被注释掉了。一旦 CSS 为 re-enabled，它就会中断。 （为了简单起见，背景图片已在这一张中删除。）
<!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，或者可能是 某些种类 of CSS 在 SVG 中时无法被 IE 识别。测试继续...
此时我觉得把这个问题的标题改成
更合适让 Internet Explorer 识别 SVG 中的 clip-path links
到
Internet Explorer 无法识别 CSS SVG 元素
此外，根据 this page，自版本 9 以来，IE 显然在 <svg> 内部具有 "full basic support" for <style>。所以我真的很想知道它讨厌什么 my CSS。 a:hover 不是一个特别奇特的选择器...
添加 /* <![CDATA[ */（如该示例所示）也没有解决问题。
以下是在 IE11 中工作的 CSS :hover 实现的两个示例：
*CodePen 不支持 IE，但如果在 HTML 文件中准备好悬停样式，则该样式有效。
答案是...
对于 SVG 中的不透明度过渡，IE 需要大于零的不透明度！
a.hover_area:link, a.hover_area:visited {opacity: 0.001}
否则它会把它扔掉，比如 "heyyyyy, won't be needing this invisible thing!" 尽管被告知要进行转换：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>