我可以使用z-index以各种顺序将各种
HTML元素放在彼此之上,除了内联SVG中的一个元素.例如,给定HTML
<div>
<p>Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
<svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="40" r="20" fill="red" />
</svg>
</div>
<div>
<svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="20" fill="red" />
</svg>
<p>SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
</div>
和匹配的CSS
p {
width: 200px;
z-index:10;
}
div {
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
无论我如何订购这两个或调整z-index,内联SVG都会在文本的顶部呈现.我如何获得文本背后的SVG？
以上示例可在https://jsfiddle.net/o0n10j78/1/获得.
如果它是相关的,在我的实际应用程序中,我在jQuery的帮助下生成几乎所有的Javascript文档结构,包括内联SVG和我希望在它前面的HTML块.
