Internet Explorer无法识别SVG元素的CSS [英] Internet Explorer not recognizing CSS for SVG elements
本文介绍了Internet Explorer无法识别SVG元素的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个SVG图片地图，链接上具有悬浮样式.
I have an SVG image map with hover styles on the links.
(有关SVG图片地图的更多信息，请此处.)
(More on SVG image maps here.)
经过测试的所有受人尊敬的浏览器都正确显示了它.
All respectable browsers I've tested on are displaying it correctly.
IE没有任何内容(惊讶！)...
IE is not having any of it (surprise!)...
(我只关注IE11，而不是超级旧版本.)
感谢对类似问题的答案，我知道IE可以显示剪切路径，只要它们是其中的一部分SVG标记，并且未添加CSS样式.
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.
就我而言，由于它是图像地图，因此剪切路径位于锚标签内.也许这就是为什么IE感到困惑的原因，但是我还没有阅读过任何不支持它的地方.
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.
这就是我所拥有的(确认可以在Firefox，Chrome，Safari，Opera中运行):
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>
如果您在上述非IE浏览器中运行代码段，则应该会看到鼠标悬停时铅笔的颜色出现.
If you run the code snippet in the aforementioned non-IE browsers, you should see the colors of the pencils appear upon hovering.
可以做一些不同的事情来使IE识别剪切路径链接吗?
Can something be done differently to get IE to recognize the clip-path links?
我已经取得了一些进展.我在IE11中有一个单独的测试文件！
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.
下面是一个代码段，其中包含(1)多边形路径，(2)作为链接的多边形路径和(3)作为链接的多边形剪切路径:
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>
我已将问题缩小为IE不喜欢我的CSS.
这是一个片段，其中剪切路径上的链接有效，但CSS已被注释掉.重新启用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>
所以现在我想知道是否是因为我将CSS放置在了 的位置，或者是某些类型的在SVG内时IE无法识别的CSS.测试仍在继续...
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
让Internet Explorer识别SVG内部的剪切路径链接
Getting Internet Explorer to recognize clip-path links inside SVG
到
Internet Explorer无法识别SVG元素的CSS
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...
添加/* <![CDATA[ */(如该示例所示)也不能解决问题.
Adding /* <![CDATA[ */ (as is shown in that example) hasn't fixed the problem either.
以下是在IE11中工作的CSS :hover实现的两个示例:
Here are two examples of CSS :hover implementation that work in IE11:
- Stack Overflow: SVG CSS Hover Styling
- CodePen: CSS SVG hover color*
* CodePen不支持IE，但是如果在HTML文件中进行准备，则该悬停样式可以工作.
推荐答案
答案是...
a.hover_area:link, a.hover_area:visited {opacity: 0.001}
否则，它将被丢弃，例如嘿，yyyyy，将不需要这种看不见的东西！"尽管被告知要过渡:transition-property: opacity;
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;
这是一个片段，可以在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>
这篇关于Internet Explorer无法识别SVG元素的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
