SVG 文本元素未显示在图表上

Question

我正在尝试使用普通的 JavaScript 和 SVG 动态创建饼图，并且我希望它具有工具提示，当您将鼠标悬停在特定于特定切片的每个饼切片上时会显示工具提示。 如果我插入一个 <title> 节点，我可以让它工作，但我不能用 CSS 自定义 <title> 使其看起来“漂亮”。

所以，我正在尝试使用 SVG 文本找到解决方法，但我似乎无法显示文本框。我尝试将包含工具提示框和文本的组放在饼图切片路径之前和之后，但无论哪种方式都不起作用。

当我去检查器时，我可以看到带有工具提示的组正在创建并显示在后端，但我在呈现的页面上看不到它们。谁能指出我正确的方向？我认为这可能与组的转换有关，但我尝试了不同的设置并没有解决它。我不确定我在这一点上做错了什么。我创建了一个 CodePen，目前我在：https://codepen.io/tho1379/pen/MWjMKQV

Answer 1

viewBox 属性定义了 SVG 视口在用户空间中的位置和尺寸。在 viewBox="-1 -1 2 2" 的情况下，视口的宽度是 2 个用户单位，高度也是 2。图形从 x="-1" 和 y="-1"

同时您的文本字体大小为：.9rem（可能是 14.4 个单位）

为了解决这个问题，我将文本分隔在不同的组中。我已将 piePaths 放入带有 viewBox="0 0 2 2" 的符号中，因为我不想要带有负坐标的符号，所以我正在对 piePaths transform="translate(1,1)"
接下来我使用符号：<use xlink:href="#pie" width="200" height="200"/> 这将使馅饼变大（200/200）

现在您可以看到文本，但它们都是重叠的。我会把它留给你翻译每个你需要的工具提示。

作为观察：在 svg 中使用 z-index 毫无意义。为了在顶部放置一个形状，您在文档末尾绘制该形状

.myPie {
  width: 90%;
  margin: 2rem auto;
}

/*
svg {
  width: 100%;
}
*/

/* testing
.piePath {
  visibility: hidden;
}
*/

.piePath .tooltip {
  /*z-index: 1000;
  visibility: hidden;*/
}


path {
  opacity: 0.6;
}


.piePath:hover .tooltip {
 visibility: visible;
}

.piePath:hover path {
  opacity: 1;
  cursor: pointer;
}

.tooltip text {
    fill: black;
    font-size: 0.9rem;
    font-family: sans-serif;
}
.tooltip rect {
    fill: Cornsilk;
    stroke: Gray;
}

<div class="myPie">
  <svg viewBox="0 0 200 200" style="transform: rotate(-90deg)">
    <symbol id="pie" viewBox="0 0 2 2">
      <g transform="translate(1,1)">
    <g class="piePath">
      <path d="M 1 0 A 1 1 0 0 1 0.4600650377311522 0.8878852184023752 L 0 0" fill="MediumPurple" id="1"></path>
      
    </g>
    <g class="piePath">
      <path d="M 0.4600650377311522 0.8878852184023752 A 1 1 0 0 1 -0.7757112907044198 -0.6310879443260528 L 0 0" fill="PaleVioletRed" id="2"></path>
      
    </g>
    <g class="piePath">
      <path d="M -0.7757112907044198 -0.6310879443260528 A 1 1 0 0 1 -0.5766803221148672 -0.816969893010442 L 0 0" fill="MediumSeaGreen" id="3"></path>

    </g>
    <g class="piePath">
      <path d="M -0.5766803221148672 -0.816969893010442 A 1 1 0 0 1 -0.06824241336467135 -0.9976687691905392 L 0 0" fill="SteelBlue" id="4"></path>
     
    </g>
    <g class="piePath">
      <path d="M -0.06824241336467135 -0.9976687691905392 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" fill="Coral" id="5"></path>
      
    </g>
    </g>
    </symbol>
    
   <use xlink:href="#pie" width="200" height="200"/>
    
    <g id="text">
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Vanilla</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Chocolate</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Pistachio</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Strawberry</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Maple Walnut</text>
      </g>
      
    </g>
  </svg>
</div>