Question

我创建了一个svg图表，我添加了一个工具提示，显示鼠标悬停时的相应值。

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

我尝试将z-index:-1; position: relative;添加到path，z-index:999; position: fixed;添加到text，但无效。

请参阅此处的示例：https://jsfiddle.net/sgcw8btx/

Answer 1

创建svg元素时，遵循以下规则：

3.3渲染顺序

SVG文档片段中的元素具有隐式绘制顺序，SVG文档片段中的第一个元素得到＆＃34;绘制＆＃34;第一。后续元素绘制在先前绘制的元素之上。

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

<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>

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

1 个答案: