Question

我在IE 10和IE 11中遇到与SVG对象重叠的问题。为了解这个问题，我创建了一个带有简单矩形和直线的html文件。我们使用SVG绘制线元素。这里显示了一半的线，但是即使线的z-index高于矩形，也不会看到与矩形重叠的线的其余部分。

以下是HTML文件的内容

<html>
<head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="2" style="z-index:2; position:absolute;stroke:#000000;stroke-width:3px;" x1="990" y1="242" x2="567" y2="242"></line>
</svg>
<div ID="1" height="277">
<table id="1_rectangle" type="rectangle" height="277" style="position: absolute;top: 129;left: 242;width: 567;border: 1 solid #000000;color: #000000;color: #000000;background-color: #ffff00;border-collapse: collapse; table-layout: fixed;z-index:1;background-image: -ms-linear-gradient(top, #ffff00 0%, #ffff00 100%);">
<tr>
<td height="277"></td>
</tr>
</table>
</div>
</body>
</html>

Answer 1

<html>
<head>
<body>

<div style="position: relative; z-index:2; margin-top:300px; margin-left:100px; ">
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
        <line x1="0" y1="10" x2="300" y2="10"  style="stroke:#000000; stroke-width:15px;"/>
    </svg>
</div>

<div ID="1" height="277">
<table id="1_rectangle" type="rectangle" height="277" style="position: absolute;top: 129;left: 242;width: 567;border: 1 solid #000000;color: #000000;color: #000000;background-color: #ffff00;border-collapse: collapse; table-layout: fixed;z-index:1;background-image: -ms-linear-gradient(top, #ffff00 0%, #ffff00 100%);">
<tr>
<td height="277"></td>
</tr>
</table>
</div>
</body>
</html>

IE10-11中SVG的对象重叠问题

1 个答案: