2012-11-04 7 views
2

누구나 동적으로 svg 이미지의 크기를 조정하여 컨테이너 내에 맞출 수 있다는 것을 알고 있습니까 ?? 나는 오버 플로우 된 이미지를 찾는다. 내가 원하는 것은 그것을 오버 플로우하지 않도록 크기를 조정하는 방법입니다. 모든 응답을 부탁드립니다. 나는 너비와 높이를 100 %로 설정하려고 시도했다.SVG 동적 크기 조정

+0

코드를 작업의 기초로 제공하십시오. –

+0

반복 질문 : http://stackoverflow.com/questions/3120739/resizing-svg-in-html – Graviton

+0

내 코드가 많이 있습니다. 말 그대로 당신에게 폴더를 보내야합니다. 어떻게 보이는지 스냅 샷을 찍을 수 있습니다. 그게 도움이 될까요? 위의 링크처럼 너비와 높이를 100 %로 설정해 보았습니다. –

답변

3

그래, 동적 너비를하는 가장 쉬운 방법은 단지 width 또는/및 height에 백분율 값을 제공하는 것이다. 당신은 여기에 바이올린 http://jsfiddle.net/VDKwy/

내 예를 찾을 수 있도록 핵심 부분 중 하나 width과 SVG 요소 오프의 height 속성 또는

<svg width="100%" height="100%"></svg> 

을 떠나 그리고 같은 내부 요소에 대한 백분율 값을 사용하여 그래서 :

<rect x="10%" y="10%" width="80%" height="80%" style="fill:blue;stroke-width:5; stroke:black" /> 
+0

이것은 내 컨테이너가 어떻게 보이는지 보여주는 예입니다. 표현식 이미지는 svg입니다. 다음은 그 스냅 샷에 대한 링크입니다. http://imgur.com/3Yw6v –

+0

동적 너비와 높이를 제공하면 필요한 공간에 맞지 않습니다. –

+0

예, 여전히 오버플로됩니다. –