IE 中“使用”链接中 SVG 上的 ClipPath答案

【问题标题】：ClipPath on SVG within 'use' link in IEIE 中“使用”链接中 SVG 上的 ClipPath
【发布时间】：2014-09-19 18:01:47
【问题描述】：

我有一个四切片缩放 SVG 图像，它在所有浏览器中都很好用，除非我尝试通过使用标签包含它。然后它在 Chrome、Firefox 和 Safari 中运行良好，但在

问题似乎出在剪辑路径上，我是否缺少一些东西来让它在 IE 中工作，或者它只是不受支持？如果没有，有没有办法以 IE 友好的方式实现相同的效果？

谢谢！

#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">

	<defs>
		<symbol id="topleft" viewBox="0 0 500 500">
			<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
			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
			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
			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"/>
		</symbol>
		<symbol  id="topright" viewBox="0 0 500 500">
			<use xlink:href="#topleft"/>
		</symbol>
		<symbol id="bottomleft" viewBox="0 0 500 500">
			<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
			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
			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
			c0,0-413.3,0-413.6,0C46.8,495.2,6,495,5.3,494.5z"/>
		</symbol>
		<symbol  id="bottomright" viewBox="0 0 500 500">
			<use xlink:href="#bottomleft"/>
		</symbol>
			
		<clipPath id="crop">
			<rect class="mask" width="100%" height="100%" x="0"/>
		</clipPath>
	</defs>

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

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

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

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

【问题讨论】：

标签： html css svg

【解决方案1】：

问题之所以发生，是因为我将主 SVG 隐藏在带有 display: none; 的容器中，如果我在父容器上使用 visibility: hidden; 或 position: absolute;，也会发生同样的情况。

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

这是一个非常晦涩难懂的问题，即使 SVG 被隐藏，非剪辑元素的渲染方式也很奇怪。哦，主 SVG 也必须放在使用链接上方，否则 Safari 不会呈现它。

【讨论】：

如果您不能使用“display: none”，可以使用的一种替代方法是使用“width:0; height:0;”和“位置：绝对”，所以它不会影响页面流。如果零大小有问题，请尝试绝对定位并将其移出页面（例如，左侧：-9999px" 等）。