时间戳

首页 > 解决方案 > SVG 文本元素未显示在图表上

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

问题描述

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

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

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

标签： javascriptcsssvgcharts

解决方案

viewBox 属性定义了 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>

推荐阅读