Question

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

路径d =＆＃34; M 300 250 A 10 15 0 1 0 250 250＆＃34;行程=＆＃34;绿色＆＃34;笔划宽度=＆＃34; 2＆＃34;填充=＆＃34;无＆＃34; /＆GT;

这样我就可以循环并生成不同参数的路径。有没有办法（循环遍历数组）？

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

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

Answer 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;});

Answer 2

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

是否可以在SVG中循环？

2 个答案: