다른 버전의 Chrome간에 일관되지 않게 렌더링 된 SVG 경로 요소
알 R.
좋은 아침,
D3를 사용하여 코드 다이어그램을 만들었습니다. 그러나 일부 버전의 Chrome에서 경로가 제대로 렌더링되지 않는 출력 문제가 발생했습니다.
다음은 D3에 의해 생성 된 문제 경로의 예입니다.
<svg height="1000px" width="1000px">
<g transform="translate(400,400)">
<path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path>
</g>
</svg>대부분의 브라우저에서 단일 호가 표시됩니다. 그러나 Ubuntu 14.04에서 Chrome 버전 36.0.1985.125를 실행하는 dev 컴퓨터에서는 큰 회색 원 위에 호가 표시됩니다. 큰 원은 다이어그램의 나머지 부분을 파괴합니다.
이 경로의 d 속성에 대해 브라우저에서 일관되지 않게 칠할 수있는 문제가 있습니까?
감사합니다.
다음은 잘못되었을 때 내가 보는 이미지입니다. 
아멜리아 BR
@jshanley의 설명을 확장하면 경로 데이터의 분류는 다음과 같습니다 (가독성을 위해 긴 소수 자릿수를 잘라 냄).
d="M 329,-46
//Move the pen to the starting point (329,-46)
A 332.5,332.5 0 0,1 329,-46
//draw a circular arc (radius in both directions 332.5 with 0 degrees rotation),
//in a clockwise direction taking the shortest route (flags 0,1)
//ending at point (329,-46).
//In a normal chord diagram, this is the edge of the chord, which follows the
//arc of the large circle.
//However, in this case the start and end points are the same
//and nothing should be drawn
Q 0,0 -25,-331
//draw a quadratic curve to point (-25, -331) using control point (0,0)
//this is the curve you see, connecting different points on the large circle
A 332.5,332.5 0 0,1 -25,-331
//another arc with the same start and end points, which shouldn't be drawn
Q 0,0 329,-46
//Another quadratic curve, the exact same shape as the previous one
//but going back in the opposite direction;
//this is what causes the curve to look like a single line, no fill
Z"
//close the shape
이것은 사용중인 Ubuntu Chrome 버전의 확실한 버그입니다. 동일한 지점에서 시작하고 끝나는 경로 호 세그먼트 는 명확하게 정의되지 않았기 때문에 플래그 설정에 관계없이 건너 뛰어야 합니다. 브라우저가 자동으로 건너 뛰지 않더라도 "짧은 호"플래그를 존중하고 길이가 0 인 호를 그릴 것이라고 생각할 것입니다.
특정 브라우저 버전에 대한 지원이 중요한 경우 코드에 오류 검사를 추가하여 양쪽 끝의 너비가 0 일 때 코드를 전혀 그리지 않거나 경로를 수동으로 편집하지 않도록해야합니다. 빈 호 명령을 제거하기위한 데이터.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
다른 구성 요소의 렌더링 함수 내에서 선언 된 구성 요소를 렌더링하면 REACT 17의 componentDidMount 메서드에 대한 변경 사항이 포함되지 않습니다.
- 2
전달 된 속성 "요소"를 기반으로 SVG 렌더링
- 3
조건부로 렌더링 된 구성 요소의 양식 제출이 처리되지 않습니다.
- 4
조건부로 렌더링 된 구성 요소의 양식 제출이 처리되지 않습니다.
- 5
중첩 된 구성 요소가 Svelte / Sapper에서 제대로 렌더링되지 않습니다.
- 6
ReactNative FlatList는 이전에 렌더링 된 다른 구성 요소가있을 때 완전히 표시되지 않습니다.
- 7
Angular에서 동적으로로드 된 다른 구성 요소 내부의 구성 요소를 어떻게 렌더링합니까?
- 8
다른 경로 구성 요소의 렌더링 시간 초과 대화 상자
- 9
React에서 부모 배열이 변경 될 때 배열 요소로서의 구성 요소가 다시 렌더링되지 않도록 방지
- 10
기능 구성 요소 자식 구성 요소는 해당 소품이 부모에 의해 업데이트 된 후 다시 렌더링되지 않습니다.
- 11
한 SVG의 경로 요소에서 다른 SVG의 다른 요소로 링크하는 방법
- 12
.kv 파일에 정의 된 경우 Kivy 개체가 렌더링되지 않습니다.
- 13
포함 된 보고서가 다른 요소 위에 렌더링되지 않도록하려면 어떻게합니까?
- 14
다른 구성 요소에서 구성 요소의 일부 다시 렌더링
- 15
구성 요소로 SVG 가져 오기가 렌더링되지 않음
- 16
SVG가 Fabric.js를 사용하여 캔버스에서 제대로 렌더링되지 않습니다.
- 17
렌더링 된 / 렌더되지 않은 JSF 구성 요소
- 18
팬텀 SVG 렌더링 : 링크 된 이미지 렌더링과 링크 된 글꼴 간의 충돌을 어떻게 방지합니까?
- 19
렌더링되기 전에 jQuery를 사용하여 요소의 의도 된 렌더링 너비를 어떻게 찾을 수 있습니까?
- 20
Angular 2 버전 4.0 구성 요소가 렌더링되지 않습니다.
- 21
ReactJS에서 전체 트리를 다시 렌더링하지 않고 트리 구성 요소의 리프 구성 요소를 렌더링하는 방법
- 22
구성 요소를 다시 렌더링하지 않는 UseContext 변경에 반응
- 23
React Router V4-페이지가 변경된 경로에서 다시 렌더링되지 않습니다.
- 24
SVG는 CSS 배경 이미지로 렌더링되지 않습니다.
- 25
하위 구성 요소가 상위 구성 요소에서 제대로 렌더링되지 않습니다.
- 26
다른 아래에 렌더링 된 스프라이트의 일부를 알파로 변경
- 27
React JS에서 버튼의 onClick 이벤트로 렌더링되지 않는 HTML 요소
- 28
일반 <select> 요소 대 모바일 장치에서 렌더링 된 Bootstrap의 드롭 다운 요소
- 29
React Mobx-관찰자 구성 요소를 렌더링하지 않는 다른 저장소의 변경 저장소
몇 마디 만하겠습니다