围绕曲线弯曲 SVG `<g>`

Question

我正在使用 D3.js 在直线上绘制一些 SVG <path>。所有这些元素都包含在具有相同垂直变换的 <g> 中。

我想"wrap"将这些元素绕成一个圆弧。最后，每个矩形应该成为一小段圆弧，垂直线将指向圆心。

我意识到我可能从一开始就在弧形中执行此操作：例如，绘制端到端的粗圆线段而不是矩形。然而，这听起来像是大量的数学和计算，尤其是对于 SVG 新手而言。

有没有办法将这些元素转换成曲线 post hoc，这意味着我可以使用我拥有的绘制这些矩形的代码——也许通过改变transform属性？如果有外部 SVG 库（虽然我没有找到成功），我也会考虑使用它。

Answer 1

比使用 path arc 命令更容易 A——虽然这不是我所希望的，因为它不能变形围绕一个圆排成一行的元素——我发现 d3.arc()（以前 d3.svg.arc()).

canvas.selectAll(".xContainer")
    .selectAll("path")
    .data(...)
    .enter()
    .append("path")
    .attr("fill", function(element, index) { return colorForSize(element[4]); })
    .attr("d", function(element, index) {

        var arc = d3.arc()
            .innerRadius(iR)
            .outerRadius(iR + 10)
            .startAngle(element[1])
            .endAngle(element[2])
            .cornerRadius(isRounded ? 8 : 0);

        return arc();

    });

谢谢，Bill。

围绕曲线弯曲 SVG `<g>`

Bend SVG `<g>` around Curve

javascript

graphics

svg

vector-graphics

d3.js