Chrome에서 전환 후 SVG textPath가 표시되지 않음

Question

이 문제는 Chrome의 버그라고 생각합니다. Firefox에서 정상적으로 작동하는 것으로 보이지만 해결 방법을 추천 해 주실 수 있기를 바랍니다. 내 잘못).

나는 이것에 유사한 방식으로 화음 다이어그램의 그룹 호에 레이블을 넣어려고 : http://bost.ocks.org/mike/uberdata/ :

내가 textPath을 사용하고

그냥 같이이를 달성하기 위해 예. 제 경우의 차이점은 데이터가 변경 될 때 호가 생성 될 때 호를 열고 데이터의 크기를 변경하는 전환을 실행하고 있다는 것입니다. path에서 전환을 사용하면 textPath이 표시되며 그 결과 텍스트가 Chrome에 바로 표시되지 않습니다. 그것은 예상대로 DOM에 존재하고 브라우저를 조정하는 것과 같은 일을 할 때 텍스트 팝업을보기로 확대합니다. 내가 경로 전환에 transition.each("end",...)를 설정하고 텍스트를 표시하게 textPath에 속성을 터치하면 http://bl.ocks.org/3148920

:

다음은 문제를 보여 일부 샘플 코드입니다. 그러나이 방법은 호를 크기 조정할 때 도움이되지 않습니다.이 시간 동안 텍스트를 경로와 함께 플로팅 시키길 원합니다. Firefox에서는이 기능이 작동하지만 Chrome에서는 텍스트가 그대로 유지됩니다.

이 방법을 사용하는 방법에 대한 아이디어가 있으십니까?

Answer 1

나는 포크와 여기 예를 수정했습니다

• 당신은 textPath 요소를 선택할 수 없습니다 : 당신은 웹킷 브라우저에서이 버그를

  • http://bl.ocks.org/3151228

  를 유발 한 WebKit이 대소 문자를 구분하는 요소 이름을 처리하는 방법의 버그로 인해. bug 83438을 참조하십시오. 웹킷은 불행히도이 버그를 고칠 수있는 흔적을 보이지 않습니다.

• 경로 요소를 단독으로 업데이트해도이 경로를 참조하는 종속 요소에서 다시 그리기가 트리거되지 않습니다. 따라서 경로를 업데이트하더라도 참조하는 textPath 요소는 다시 그려지지 않습니다. 이 업데이트 버그를 해결하기 위해 textPath의 xlink : href 속성을 "#path"로 반복 설정하는 사용자 정의 전환을 만듭니다. 이 버그가 이미 제기되었는지 확실하지 않습니다.

참고 : 텍스트는 애니메이션 시작 부분에서 호의 시작 부분에서 위로 스크롤되어 읽기가 어렵습니다. 성취하고자하는 것에 따라, use the arc to clip the text 일 수 있으므로, 호가 확장되면 텍스트가 드러납니다.