SVGの描画重なり順

svg-zorder.png

SVGの要素にはcssのz-index機能が効きません。
うーん。。SVGの致命的な欠点にも思えます。
最初に描かれた要素が最初に描画されます。
効かせるには<svg>を<div>要素で囲んで、そのdivにz-indexのスタイルをつけるしかありません

divで囲ったz-indexつきスタイルの要素と、普通のSVG図形が入り混じった場合は、
divで囲った要素が、たとえどんなに強大なz-indexの値を持っていようと奥に行ってしまいます

もし一つの.svgファイルで図形の重なり順を変えるには、要素の並び順を変えるしかありません

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <body>
    <div style="position:absolute; top:0; left:0; z-index:2;" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" version="1.1">
<rect width="100" height="100" x="50" y="15" style="fill:#5BB3E3;stroke-width:3;stroke:#805EE3" />
</svg>
</div>
<div  style="position:relative; top:0; left:0; z-index:1;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" version="1.1">
<line  x1="0" y1="35" x2="200" y2="35" stroke="#E374A4"  stroke-width="25.0" ></line>
</svg>
</div>
 
</body>
</html>

サポートサイト Wikidot.com