是否可以在 SVG 中循环？答案

【问题标题】：Is it possible to loop in SVG?是否可以在 SVG 中循环？
【发布时间】：2014-06-21 11:01:04
【问题描述】：

我希望创建一个条目数组，从中可以通过以下代码访问参数值：

path d="M 300 250 A 10 15 0 1 0 250 250" stroke="green" stroke-width="2" fill="none" />。

这样我就可以循环并为不同的参数生成路径。有没有办法做到这一点（在数组上循环）？

 !DOCTYPE html>
    <meta charset="utf-8"> 
   <title>Spline Editor</title>
   <svg width="500" height="500">
   <path d=" M 300 250 A 10 15 0 1 0 250 250"
            stroke="red" stroke-width="2" fill="none" />
            <path d=" M 300 250 A 10 45 0 1 0 250 250"
            stroke="red" stroke-width="2" fill="none" />
            <path d=" M 350 250 A 40 75 0 1 0 250 250"
            stroke="red" stroke-width="2" fill="none" />

    svg>

我希望使用循环来执行此操作。而不必一次又一次地编写路径语句。

【问题讨论】：

问题不清楚。请提供有关您要实现的目标的更多信息。是关于路径d 属性还是路径可以具有的while 属性集？
我有一个椭圆的短轴值数组。那么如何在不每次都显式编写代码的情况下为数组的所有值自动生成省略号，即我可以在这里使用 for...loop 或类似的东西。

标签： svg d3.js

【解决方案1】：

让你的数组包含所有属性并使用 d3 数据绑定：

var arr = [
    {d: 'M 300 250 A 10 15 0 1 0 250 250', stroke: 'green', 'strokewidth': 2, fill: 'none'},
    // etc..
];

svg.selectAll('path')
    .data(arr)
    .enter()
    .append('path')
    .attr('d', function(d) {return d.d;})
    .attr('stroke', function(d) {return d.stroke;})
    .attr('stroke-width', function(d) {return d.strokewidth;})
    .attr('fill', function(d) {return d.fill;});

【讨论】：

谢谢，但我拥有的数据是多个数组的形式。 var xCoord = [300, 300, 350]; var yCoord = [250, 250, 250];变量高度=[10 , 20 , 40];每个数组只包含一个要插入到 path 函数中的组件。现在如何将这些值组合在一起？

【解决方案2】：

用 JavaScript 做到这一点并不难。看一下以声明方式执行此操作的一种方法： http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm 在脚本中，只需使用 SVG DOM 检索路径并使用 pathname.setAttribute("d", newdata) 重置其 d 属性。你是不是这么想的？

【讨论】：