2012-09-08 4 views
0

타원을 선으로 연결하고자하는 SVG 이미지 (노드에 대한 타원이있는 트리 맵)를 구성했지만이 선들은 가장자리에서 시작합니다. 타원. 가장자리가 떨어지는 곳을 계산하고 선을 시작하거나 끝내는 것이 매우 어렵 기 때문에 타원의 중심에서 선을 그려서 타원을 선에 겹쳐 놓을 방법을 찾고 있으므로 선을 마스킹합니다. 겹쳐진 부분으로 타원의 가장자리에서만 선이 시작되는 모양을 제공합니다. SVG가 요소 순서를 통해 z 순서를 구현하기 때문에 연결 선을 먼저 만든 다음 타원을 만드는 경우 그 점을 제외하고는 ...불투명도가 <1 인 SVG z- 순서

... 필자 불투명도가있는 타원을 파랑이나 빨강으로 지정하고 싶습니다. = "0.15",하지만 그렇게하면 선이 나타납니다. 물론 불투명도가 낮아서 커버하는 것을 완전히 가릴 수는 없지만 원하는 효과를 얻을 수있는 방법을 찾는 데는 문제가 있습니다. 한 가지 해결책을 찾았습니다. 원하는 각 타원에 대해 흰색 채우기 및 불투명도 1로 동일한 크기와 위치의 타원을 먼저 만들고 연결 선을 겹치게 완전히 덮습니다. 그런 다음 파란색 또는 빨간색 채우기 및 0.15의 불투명도로 렌더링하려는 타원에 흰색 타원에 슈퍼 임 포즈합니다. 그것이 내가보기를 원하는 방식으로 보이지만, 그것은 끈적 거리는 느낌입니다. 내가 간과하고있는 우아한 솔루션이 있습니까?

+0

소리가납니다. 왜 반투명 배경이 필요한가요? 노드를 통해 보여줄 다른 요소 나 배경이 필요합니까? 아니면 그냥 색깔이 필요 하신가요? – Duopixel

답변

0

클리핑 또는 마스킹을 사용할 수 있습니다.

줄을 전체적으로 그리지 만 타원을 제외한 모든 부분에 클립하십시오.

http://www.w3.org/TR/SVG/masking.html

0

당신은이 흰색 배경에 대해 fill-opacity 렌더링 후 색상을 얻을 필요가있다.

SVG의 스크린 샷을 찍은 다음 Photoshop과 같은 그래픽 편집 프로그램에서 열고 스포이드 도구를 사용하여 렌더링 된 색상을 검사하고 16 진수 값을 복사하십시오. 그런 다음 채우기 색상으로 사용하십시오. fill-opacity="1"

관련 문제