HTML SVG：在所有元素上显示元素

我创建了一个svg图表，我添加了一个工具提示，当鼠标悬停时显示相应的值。HTML SVG：在所有元素上显示元素

问题是，由于路径在创建条形图后呈现，因此工具提示显示在路径http://take.ms/lljq3的后面。我需要的是工具提示总是在一切前面。

我尝试将z-index:-1; position: relative;添加到path和z-index:999; position: fixed;到text但是不起作用。

参见这里的例子：https://jsfiddle.net/sgcw8btx/

来源

2016-08-12 zetacu

当创建SVG元素，下面的规则applys：

3.3绘制顺序在SVG文档片段

元素有一个隐含的描绘顺序，与SVG文档片段中的第一个元素首先被“绘制”。随后的元素被绘制在先前绘制的元素的顶部。

是不是可以将工具提示元素放置在条/线之前？否则你可以尝试使用？

<use xlink:href="#id" />

而且你可以尝试直接嵌入HTML：

<svg xmlns="http://www.w3.org/2000/svg"> 
    <g transform="translate(20,30)"> 
    <rect width="200" height="150"/> 
    <foreignObject width="200" height="150"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div> 
      Hello, <b>World</b>! 
     </div> 
     </body>  
    </foreignObject> 
    </g> 
</svg>

来源

2016-08-12 19:38:32

我结束了重构SVG的代码创建并添加了更标准的方式来生成提示 '提示= D3。选择（元素） .append（'div'） .attr（'class'，'tooltip'） .style（“opacity”，0）; 酒吧= SVG ... bars.on（ “鼠标悬停” 功能（d）{ tooltip.html（ “$” + d.processed_amount + “总销售额”） .style（ “不透明度”，1 ） .style（“left”，（x（d.date））+“px”） .style（“top”，（y0（d.amount））+“px”）; } “mouseout”，函数（d）tooltip.transition（）。style（“opacity”，0）; }）;'' – zetacu

HTML SVG：在所有元素上显示元素

回答

相关问题