SVG를 반복 할 수 있습니까?

다음 코드에서 매개 변수의 값에 액세스 할 수있는 항목의 배열을 만들고 싶습니다.SVG를 반복 할 수 있습니까?

경로 d = "M 300 250 A 10 15 0 1 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>

루프를 사용하여이 작업을 수행하고 싶습니다. 경로문을 반복해서 쓰지 않아도됩니다.

출처

2014-06-20 Atul

질문이 명확하지 않습니다. 달성하려는 것에 대한 자세한 정보를 제공해주십시오. 경로'd' 속성 또는 경로가 가질 수있는 속성 세트가 있습니까? – Imperative

나는 타원의 부축을 말하는 값들의 배열을 가지고있다. 그렇다면 코드를 명시 적으로 작성하지 않고 배열의 모든 값에 대해 줄임표를 자동으로 생성 할 수 있습니다. 예를 들어 for ... 루프 또는 이와 유사한 것을 사용할 수 있습니다. – Atul

그냥 바인딩 모든 속성 및 사용 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;});

출처

2014-06-20 11:34:04 Imperative

고마워요.하지만 가지고있는 데이터는 여러 배열 형태입니다. var xCoord = [300, 300, 350]; var yCoord = [250, 250, 250]; var height = [10, 20, 40]; 각 배열에는 경로 함수에 삽입 할 구성 요소가 하나만 포함되어 있습니다. 이제 어떻게이 값들을 함께 조합합니까? – Atul

을 너무 열심히하지 않습니다. 선언적으로 수행하는 한 가지 방법을 살펴보십시오. http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm 스크립트에서는 SVG DOM을 사용하여 경로를 검색하고 pathname.setAttribute ("d", newdata)를 사용하여 d 속성을 재설정합니다. 그것은 당신이 염두에두고 있던 일입니까?

출처

2014-06-21 03:01:04 user3665322

SVG를 반복 할 수 있습니까?

답변

관련 문제