2017-09-29 4 views
1

너비는 각각, svg 580 및 707의 뷰포트 높이를 정의합니다. viewBox의 너비와 높이는 450과 600으로 정의됩니다. svg 내부에서 사용자가 점을 제공하는 응답 폴리곤을 그리고 d3을 사용하여 즉시 다각형을 렌더링합니다.정의 된 뷰포트의 SVG 내부에 폴리곤 그리기

입력 된 사용자가 뷰포트 너비를 초과하는 다각형을 그리기에 충분히 큰 경우 너비 내에 할당 된 부분은 웹 페이지에 표시되고 나머지는 그렇지 않습니다. 정의 된 뷰포트 안에 다각형 전체를 어떻게 렌더링 할 수 있습니까?

업데이트 : 여기 jsfiddle 링크이다 : 사용자가 반경 값 (350)을 제공하는 경우 https://jsfiddle.net/riad1380/ww1xpnxy/

var viewBoxWidth = 580; 
var viewBoxHeight = 707; 

, 그 뷰포트 외부 렌더링하지만 소정의 I 상관없이 뷰포트 내의 원을 그리려 반경 및 반지름이 10 인 원도 100보다 작게 표시되어야합니다.

+0

재현 할 수있는 코드 예제를 제공 할 수 있습니까? –

+0

안녕하세요, 늦은 답변을 드려 죄송합니다. 게시물에 jsFiddle을 첨부합니다. –

답변

1

viewBox을 업데이트해야 SVG에있는 모든 항목을 다룰 수 있습니다.

사용자가 반지름 350을 입력하면 전체 원을 표시하려면 viewBox의 너비 및 높이 값이 최소한 700이어야합니다. 서클의 위치 (cxcy)에 따라 의 xy 값을 업데이트해야 할 수도 있습니다.

+0

사용자가 값을 업데이트 할 때마다 svgContainer를 다시 그려야합니까? –

+0

다시 그리기가 반드시 필요한 것은 아닙니다. 'viewBox' 속성 만 업데이트하면 충분합니다. 브라우저가 새로운 스케일로 SVG를 다시 그릴 것입니다. –

+0

시도했지만 예상대로 출력하지 않습니다. 제발 봐 : https://jsfiddle.net/riad1380/ww1xpnxy/ –

관련 문제