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：在所有元素上顯示元素

回答

相關問題