애니메이션 후/도중에 어떻게 클립 경로를 적용 할 수 있습니까?

Question

clipPath를 정의하는 SVG에 경로가 있습니다. 선 (눈금)이 그려지고 경로에 잘립니다.

선 애니메이션을 수행하면 원래의 클리핑이 유지됩니다. 애니메이션의 각 단계에서 이들을 '다시 클리핑'하고 싶습니다.

질문 : 전환하는 동안 클리핑을 수행하는 쉬운 방법이 있습니까?

샘플 문제 코드 : 당신은 SVG를 클릭하면 http://jsfiddle.net/Q29TA/

, 그것은 애니메이션을 보여줍니다.

관련 단편은 :

d3.select("#g-container") 
    .selectAll("line") 
    .data(y.ticks(10)) 
    .enter() 
    .append("line") 
    .attr("x1", 0).attr("x2", width) 
    .attr("y1", y).attr("y2", y) 
    .attr("class", "tick-marks") 
    .attr("clip-path", "url(#myclip)");​ 

d3.select("svg")   
    .on("click", function() { 
     d3.selectAll(".tick-marks") 
      .transition().duration(2500) 
      .attr("transform", "translate(0,30)") 
    }) 

나는이 일을 새로운 방법 개방,하지만 나는 clipPath 아무것도 할 수 있기 때문에, 라인의 X1과 X2를 재 계산 애니메이션을 하드 코딩 할 수 없다.

애니메이션의 여파 (I 수평 선이 컨테이너의 블루, 대각선을 만나고 싶어) 보여주는

샘플 사진 : 클리핑 경로는 무시 보인다 (당신이 발견 한 것처럼) 그래서

Answer 1

그것은 하나의 클립 경로를 사용하는 것이 좋습니다, 단지 clip-path 이동 :

주위 얻기의 다른 방법은 대신 변환 및 적용 그들의 y1 및 y2을 애니메이션으로 선을 이동하지 않는 것입니다 대신 컨테이너 g 요소까지 :

http://jsfiddle.net/dxZyq/

Answer 2

을 요소 'transform 속성. 심지어 애니메이션없이 - - 당신은 또한 일어나고 볼 수는 요소가 만들어 질 때 당신이 바로 변환을 적용하는 경우 :

.enter() 
    .append("line") 
    .attr("transform", "translate(0,30)")// <-- Same, "wrong" (i.e. undesired) clipping 
    .attr("x1", 0).attr("x2", width) 
    .attr("y1", y).attr("y2", y) 
    .attr("class", "tick-marks") 
    .attr("clip-path", "url(#myclip)");​ 

장난에서, 나는이 문제를 해결 한 방법은 모든 요소를 ​​그룹화하는 것으로 나타났습니다 그 그룹을 옮기고 번역해야합니다. 당신은 여기에서 그것을 볼 수 있습니다 : http://jsfiddle.net/Q29TA/2/ (참고, 나는 단지 당신이 만든 그룹을 번역 할 뿐이므로 그것도 파란 경로를 가지고있어서 옳지 않다). http://jsfiddle.net/Q29TA/1/