SVG 添加文本以及圆弧答案

【问题标题】：SVG Add text along with circle arcSVG 添加文本以及圆弧
【发布时间】：2020-12-03 06:32:11
【问题描述】：

我正在尝试绘制 svg 径向饼图，并在此处提到 colour chart

现在我正在尝试将文本与弧一起添加到每个切片中。

我正在尝试以完全相同的 x、y 坐标与 M 和 A 值显示 Text 1。但即使它没有显示。

EG：用于切片

<path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />

对于文字

<path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />

但没有任何效果。我在这里缺少什么

<svg width="670" height="670" viewBox="-10 -10 220 220" class="pie-chart" id="xyz" style="border:1px solid black;">
    <linearGradient id="wheelsegOuter01" x1="0" y1="-83" x2="83" y2="0">
      <stop offset="0%" stop-color="#ff5e53" />
      <stop offset="100%" stop-color="#ff5e53" />
    </linearGradient>
    <linearGradient id="wheelsegOuter02" x1="83" y1="0" x2="0" y2="83">
      <stop offset="0%" stop-color="#46c6b4" />
      <stop offset="100%" stop-color="#46c6b4" />
    </linearGradient>
    <linearGradient id="wheelsegOuter03" x1="0" y1="83" x2="-83" y2="0">
      <stop offset="0%" stop-color="#055295" />
      <stop offset="100%" stop-color="#055295" />
    </linearGradient>
    <linearGradient id="wheelsegOuter04" x1="-83" y1="0" x2="0" y2="-83">
      <stop offset="0%" stop-color="#fde152" />
      <stop offset="100%" stop-color="#fde152" />
    </linearGradient>
    <linearGradient id="wheelsegOuter11" x1="0" y1="-70" x2="49.497" y2="-49.497">
      <stop offset="0%" stop-color="#d3e0d6" />
      <stop offset="100%" stop-color="#d3e0d6" />
    </linearGradient>
    <linearGradient id="wheelsegOuter12" x1="49.497" y1="-49.497" x2="70" y2="0">
      <stop offset="0%" stop-color="#efefef" />
      <stop offset="100%" stop-color="#efefef" />
    </linearGradient>

    <path d="M 155.154 85.154 L 210.309 116.974 " id="wheelsegOuterTextABC1" />     
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />
  </defs>
  <Foo xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" />
  <g id="pathOuterList0" transform="translate(100,100)" stroke-width="10" fill="none">
    <path d="M 0 ,-83 A 83,83 0 0,1 83, 0" stroke="url(#wheelsegOuter01)" />
    <path d="M 83 ,0 A 83,83 0 0,1 0, 83" stroke="url(#wheelsegOuter02)" />
    <path d="M 0 ,83 A 83,83 0 0,1 -83, 0" stroke="url(#wheelsegOuter03)" />
    <path d="M -83 ,0 A 83,83 0 0,1 0, -83" stroke="url(#wheelsegOuter04)" />
  </g>
  <g id="pathOuterList1" transform="translate(100,100)" stroke-width="10" fill="none">
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />  
    <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC2">text 1</textPath>
    </text>
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M 49.497 ,49.497 A 70,70 0 0,1 0, 70" stroke="url(#wheelsegOuter12)" />
    <path d="M 0 ,70 A 70,70 0 0,1 -49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,49.497 A 70,70 0 0,1 -70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M -70 ,0 A 70,70 0 0,1 -49.497, -49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,-49.497 A 70,70 0 0,1 0, -70" stroke="url(#wheelsegOuter12)" />
  </g>
 
  <text font-size="12">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC1">text 2</textPath>
  </text>
</svg>

我的最终目标是画出这样的东西

【问题讨论】：

标签： javascript css svg curve

【解决方案1】：

能够解决这个问题。问题在于视图框和变换值。 A simple pie chart in SVG 和 A designer’s adventure in maths and SVG 帮助我理解我的缺失概念

<svg width="670" height="670" viewBox="-100 -100 200 200" class="pie-chart" id="xyz" style="border:1px solid black;">
    <linearGradient id="wheelsegOuter01" x1="0" y1="-83" x2="83" y2="0">
      <stop offset="0%" stop-color="#ff5e53" />
      <stop offset="100%" stop-color="#ff5e53" />
    </linearGradient>
    <linearGradient id="wheelsegOuter02" x1="83" y1="0" x2="0" y2="83">
      <stop offset="0%" stop-color="#46c6b4" />
      <stop offset="100%" stop-color="#46c6b4" />
    </linearGradient>
    <linearGradient id="wheelsegOuter03" x1="0" y1="83" x2="-83" y2="0">
      <stop offset="0%" stop-color="#055295" />
      <stop offset="100%" stop-color="#055295" />
    </linearGradient>
    <linearGradient id="wheelsegOuter04" x1="-83" y1="0" x2="0" y2="-83">
      <stop offset="0%" stop-color="#fde152" />
      <stop offset="100%" stop-color="#fde152" />
    </linearGradient>
    <linearGradient id="wheelsegOuter11" x1="0" y1="-70" x2="49.497" y2="-49.497">
      <stop offset="0%" stop-color="#d3e0d6" />
      <stop offset="100%" stop-color="#d3e0d6" />
    </linearGradient>
    <linearGradient id="wheelsegOuter12" x1="49.497" y1="-49.497" x2="70" y2="0">
      <stop offset="0%" stop-color="#efefef" />
      <stop offset="100%" stop-color="#efefef" />
    </linearGradient>

    
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" id="wheelsegOuterTextABC2" />
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" id="wheelsegOuterTextABC01" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" id="wheelsegOuterTextABC03" />
    
  </defs>
  <Foo xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" />
  <g id="pathOuterList0" stroke-width="10" fill="none">
    <path d="M 0 ,-83 A 83,83 0 0,1 83, 0" stroke="url(#wheelsegOuter01)" />
    <path d="M 83 ,0 A 83,83 0 0,1 0, 83" stroke="url(#wheelsegOuter02)" />
    <path d="M 0 ,83 A 83,83 0 0,1 -83, 0" stroke="url(#wheelsegOuter03)" />
    <path d="M -83 ,0 A 83,83 0 0,1 0, -83" stroke="url(#wheelsegOuter04)" />
  </g>
  <g id="pathOuterList1" stroke-width="10" fill="none">
    <path d="M 0 ,-70 A 70,70 0 0,1 49.497, -49.497" stroke="url(#wheelsegOuter11)" />  
    <path d="M 49.497 ,-49.497 A 70,70 0 0,1 70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M 70 ,0 A 70,70 0 0,1 49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M 49.497 ,49.497 A 70,70 0 0,1 0, 70" stroke="url(#wheelsegOuter12)" />
    <path d="M 0 ,70 A 70,70 0 0,1 -49.497, 49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,49.497 A 70,70 0 0,1 -70, 0" stroke="url(#wheelsegOuter12)" />
    <path d="M -70 ,0 A 70,70 0 0,1 -49.497, -49.497" stroke="url(#wheelsegOuter11)" />
    <path d="M -49.497 ,-49.497 A 70,70 0 0,1 0, -70" stroke="url(#wheelsegOuter12)" />
  </g>
  
  
  <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC01">text 2</textPath>
  </text>
  <text font-size="12">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC2">text 3</textPath>
  </text>
   <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC03">text 1</textPath>
  </text>
   <text font-size="12" >
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wheelsegOuterTextABC04">text 4</textPath>
  </text>
</svg>

【讨论】：