IE浏览器'use'链接中的SVG上的ClipPath

我有一个四切片缩放SVG图像，它在所有浏览器中都很好用，除非我尝试通过使用标记包含它。然后它在Chrome，Firefox和Safari中正常工作，但不在< = IE11中。IE浏览器'use'链接中的SVG上的ClipPath

这个问题似乎与剪辑路径，有没有什么我想念得到这个工作在IE浏览器或只是不支持？如果没有，有没有办法以IE友好的方式达到同样的效果？

谢谢！如果我在父容器上使用visibility: hidden;或position: absolute;

#box, 
 
#use { 
 
    width: 200px; 
 
    height: 50px; 
 
} 
 

 
#use { 
 
    fill: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="display: none;"> 
 
    <svg id="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 

 
\t <defs> 
 
\t \t <symbol id="topleft" viewBox="0 0 500 500"> 
 
\t \t \t <path d="M3.1,22.6c0,0.2,0,0.4,0,477.4H5C5,22.9,5,22.5,5,22.6c0-4.3,0-7.9,0.1-8.8C5.1,11.5,5,8.2,6.2,6.1 
 
\t \t \t c0.4-0.6,40.8-0.8,80.2-0.9c0.5,0,413.6,0,413.6,0V3.4c0,0-413.3,0-413.6,0C47.5,3.4,8.2,3.6,6.7,4C6.5,3,6.6,2,6.5,1 
 
\t \t \t C6.4,0.3,5.7-0.1,5,0c-0.7,0.1-1,0.8-1,1.4C4.2,2.2,4.2,3,4.2,3.7C3.4,3.9,2.7,4.2,1.9,4.4c-1.5,0.3-1,2.7,0.5,2.4 
 
\t \t \t C2.9,6.6,3.5,6.4,4,6.3C3.5,7.8,3.5,9.7,3.4,11C3.3,12,3.1,19.8,3.1,22.6z"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="topright" viewBox="0 0 500 500"> 
 
\t \t \t <use xlink:href="#topleft"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="bottomleft" viewBox="0 0 500 500"> 
 
\t \t \t <path d="M5.3,494.5C5,493.1,5,484.3,5,477.4L5,0H3.1l0,477.4c-0.1,7.2,0,15.3,0.4,17.2c-0.8,0.1-1.7,0.1-2.5,0.3 
 
\t \t \t c-0.6,0.2-1.1,0.7-1,1.4c0.1,0.6,0.8,1.1,1.4,1c0.6-0.2,1.3-0.2,1.9-0.2c0,0.2-0.2,1.5-0.3,1.7C3,499.4,3.7,500,4.3,500 
 
\t \t \t c0.7,0,1.2-0.5,1.3-1.1c0-0.1,0.3-2.3,0.3-2.3c1.8,0.4,4.2,0.3,5.3,0.4c0.9,0.1,37.6,0.2,75.2,0.3c0.3,0,413.6,0,413.6,0v-2.1 
 
\t \t \t c0,0-413.3,0-413.6,0C46.8,495.2,6,495,5.3,494.5z"/> 
 
\t \t </symbol> 
 
\t \t <symbol id="bottomright" viewBox="0 0 500 500"> 
 
\t \t \t <use xlink:href="#bottomleft"/> 
 
\t \t </symbol> 
 
\t \t \t 
 
\t \t <clipPath id="crop"> 
 
\t \t \t <rect class="mask" width="100%" height="100%" x="0"/> 
 
\t \t </clipPath> 
 
\t </defs> 
 

 
\t <svg width="50%" height="50%"> 
 
\t \t <use xlink:href="#topleft" width="500" height="500" class="box_border__tl"/> 
 
\t </svg> 
 

 
\t <!-- top right: --> 
 
\t <g transform="scale(-1, 1)"> 
 
\t \t <svg width="50%" height="50%" x="-100%" y="0"> 
 
\t \t \t <use xlink:href="#topright" width="500" height="500" class="box_border__tr"/> 
 
\t \t </svg> 
 
\t </g> 
 

 
\t <!-- bottom left: --> 
 
\t <g transform="scale(1, -1)"> 
 
\t \t <svg width="50%" height="50%" x="0" y="-100%" clip-path="url(#crop)"> 
 
\t \t \t <use xlink:href="#bottomleft" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__bl"/> 
 
\t \t </svg> 
 
\t </g> 
 

 
\t <!-- bottom right: clip-path="url(#crop)" --> 
 
\t <g transform="scale(-1, -1)"> 
 
\t \t <svg width="50%" height="50%" x="-100%" y="-100%" clip-path="url(#crop)"> 
 
\t \t \t <use xlink:href="#bottomright" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__br"/> 
 
\t \t </svg> 
 
\t </g> 
 
</svg> 
 

 
</div> 
 
    
 
<svg id="use" class="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <use xlink:href="#box"/> 
 
</svg>

来源

2014-09-19 iamdarrenhall

问题正在发生，因为我躲在一个集装箱的主要SVG与display: none;同样也会发生。

它只在主页面呈现主SVG时才起作用。如果您从主项目可见开始，然后使用javascript隐藏它，它也可以工作。

这是一个非常隐晦的问题，甚至当SVG被隐藏时，非剪裁元素如何渲染也是奇怪的。哦，也是主要的SVG必须放置在使用链接之上，否则Safari不会渲染它。

来源

2014-09-19 09:11:47 iamdarrenhall

如果您不能使用“display：none”，则可以使用的一种替代方法是使用“width：0; height：0;”和“position：absolute”，所以它不会影响页面流。如果零大小是一个问题，请尝试绝对定位并将其从页面移开（例如，left：-9999px“等）。 – 2014-09-19 11:18:23

IE浏览器'use'链接中的SVG上的ClipPath

回答

相关问题