SVG沿圆弧添加文字
SVG add text along the circle arc
我正在尝试绘制此处提到的 SVG 径向饼图：colour chart。
现在我正尝试将文本添加到每个切片以及圆弧。
我正在尝试显示具有完全相同的 x、y 坐标和 M 和 A 值的 文本 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>
我的最终目标是画这样的东西
能够解决这个问题。问题在于视图框和转换值。
A simple pie chart in SVG and 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>
我正在尝试绘制此处提到的 SVG 径向饼图：colour chart。
现在我正尝试将文本添加到每个切片以及圆弧。
我正在尝试显示具有完全相同的 x、y 坐标和 M 和 A 值的 文本 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>
我的最终目标是画这样的东西
能够解决这个问题。问题在于视图框和转换值。 A simple pie chart in SVG and 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>