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

Question

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

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

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

Answer 1

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

同时你的文字有 font-size: .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>