Question

在饼图中，无论何时单击切片，都必须像在图像中一样轻微移动。 This is the image

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

计算距离后，使用X，Y值转换（X，Y）属性，将弧切片移动到指定点

Answer 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>

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

1 个答案: