如何计算SVG中两点之间的距离？

【问题标题】：How to calculate the distance between two points in SVG?如何计算SVG中两点之间的距离？
【发布时间】：2015-12-10 10:06:05
【问题描述】：

在饼图中，每当单击一个切片时，都必须像在图像中那样稍微移动它。 This is the image

如何做到这一点？我正在做的是，创建一个半径比原始 arg 高 10 的虚拟 arg。然后找出它们之间的距离。

计算距离后，使用 translate(X,Y) 属性的 X,Y 值将圆弧切片移动到指定点

【问题讨论】：

标签： svg transform pie-chart points

【解决方案1】：

这是一个例子：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0">
    <g transform="translate(200 200)">
        <circle cx="0" cy="0" r="150" stroke="#000" fill="none" />
        <path d="M0,-150 Q0,0 106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,106.066" fill="none" stroke="red" stroke-width="3" />
        <path d="M0,-150 Q0,0 -106.066,-106.066" fill="none" stroke="red" stroke-width="3" />
    </g>
</svg>

【讨论】：

我真正需要的是，参考下图，