#svg
#svg
Вопрос:
Я столкнулся с некоторой проблемой с перекрытием объектов с SVG в IE 10 и IE 11. Чтобы понять эту проблему, я создал один HTML-файл с простым прямоугольником и линией. Мы использовали SVG для рисования элемента line. Здесь отображается половина строки, но остальная часть строки, которая перекрывает прямоугольник, не видна, даже если z-индекс строки выше, чем прямоугольник.
Вот содержимое 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>
Ответ №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>
Комментарии:
1. Спасибо Виджаю.. Это работает.. Но здесь допустим, что для нескольких строк, каждая из которых имеет разные z-индекс и позицию, нам нужно будет добавить тег <Div> с тегом <SVG> внутри для каждой. Есть ли какое-либо решение для этого множественного тега <svg> в этом случае??