svg (바틱 포함)의 크기를 조정하고 표시하는 방법은 무엇입니까?

Question

나는 100x100 픽셀의 svg 파일을 가지고 있습니다 (예를 들어). 바틱을 사용하고 있습니다.

내가 할 경우 : 그것은 단지이 그림의 일부가 아닌 크기가 조정 된 이미지를 표시합니다

JSVGCanvas svg = new JSVGCanvas(); 
[...] 
svg.setSize(10,10); 

.

크기가 조정 된 svg 사진을 어떻게 표시 할 수 있는지 알고 있습니까?

덕분에)

Answer 1

당신은 당신이 표시되는 문서 루트 <svg> 요소에 설정 viewBox="" 속성이 있는지 확인해야합니다. 예를 들어, viewBox="100 100 300 200"을 지정하면 영역 (100,100) → (400,300)이 JSVGCanvas의 크기로 조정됩니다. 기본적으로이 영역의 가로 세로 비율은 배율 조정시 유지되므로 가로 세로 비율이 JSVGCanvas과 일치하지 않으면 위 또는 아래에 약간의 여백이 추가됩니다. 해당 동작을 재정의하려면 preserveAspectRatio="" 특성을 사용하십시오.

Answer 2

보기 상자 매개 변수를 사용하면 보거나 표시 할 캔버스 부분을 설정할 수 있습니다. 당신은 당신의 SVG (이것은 벡터 이미지입니다 때문에 SVG는 실제 크기가 없음),이 같은 <svg> 헤더에 폭 및 높이를 매개 변수를 선물을 변경/추가 할 수 있습니다 "조정"할 경우

를 당신이보기 상자를 변경하려면

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" width="1200" height="720" contentStyleType="tex ....</svg> 

, 당신은 (720 1200의 HD보기 용) <svg> 헤더의 매개 변수를

viewBox="0 0 1200.0 720.0" 

를 추가 할 수 있습니다.