如何将HTML元素放在内联SVG上
发布时间:2020-12-14 23:46:27 所属栏目:资源 来源:网络整理
导读:我可以使用z-index以各种顺序将各种 HTML元素放在彼此之上,除了内联SVG中的一个元素.例如,给定HTML div pText 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" bas
我可以使用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块. 解决方法
z-index属性仅应用于定位元素.添加位置:相对;到段落标签将正确应用它.
请查看this page以获取该物业的完整参考. 在旁注:正如我在评论中首次写的那样,将svg z-index设置为-1可以降低元素的优先级,使其低于所有元素所具有的默认值.这带来了svg实际上被置于div后面的缺点.尝试将svg z-index设置为-1时将背景颜色应用于div. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |