SVG를 사용하는 부분 테두리/획

Question

'rect'요소로 구성된 차트를 만들 때 svg/d3을 사용하고 있습니다.

각 직사각형에 단색 테두리/획을 추가하는 가장 좋은 방법은 무엇입니까 (사각형 맨 위에 만 해당)?

감사

Answer 1

내가 SVG는 사각형 또는 경로의 부분을 쓰다듬어 지원 생각하지 않는다 - 스트로크는 CSS 국경처럼되지 않습니다. 당신은 몇 가지 추가 작업이 걸릴 모두 몇 가지 다른 옵션으로 남겨 :

• 스트로크 전체 rect을하고 clipPath이 다른 세 모서리를 제거하기 위해 적용 - 당신보다 사각형이 더 큰 만들면 아마 가장 잘 작동합니다 필요한.

• 그래디언트 정의를 사용하여 각 직사각형에 채우기를 적용하여 모양의 맨 위에 "경계선"을 표시합니다.

• 각 rect의 테두리 역할을하는 별도의 line 요소를 추가하십시오.

• stroke-dasharray 속성 (docs)을 사용하여 "대시"가 rect 상단 만 덮는 대시 정의를 설정합니다. 이것은 올바르게하기 까다로울 수 있지만 스트로크가 아마도 모양 왼쪽 상단에서 시작되므로 너무 어렵지 않을 것으로 생각됩니다.