동적으로 SVG를 스케일링

Question

사용자가 몇 개의 텍스트 상자를 통해 SVG 이미지를 조작 할 수있는 사이트에서 작업하고 있습니다. 컨테이너 div에 맞게 SVG 스케일을 갖고 싶습니다.

예를 들어 SVG가 정확히 컨테이너 높이와 너비가 10 픽셀 인 경우 높이를 두 배로 설정하면 겉보기 너비가 5 픽셀이됩니다.

내 페이지는 왼쪽의 숫자와 오른쪽의 이미지로 대략 반으로 나뉩니다. 브라우저 크기를 조정하면 SVG의 컨테이너 요소가 모양이 바뀌므로 SVG에서 컨테이너의 크기를 하드 코딩 할 수 없습니다.

온라인으로 찾은 모든 솔루션에는 viewBox 속성이 사용됩니다. 그러나 하드 코딩 된 컨테이너 크기가 없어도 적용 할 수있는 방법을 찾을 수 없습니다.

https://jsfiddle.net/xyjs5b63/

Answer 1

조정 viewBox은 원하는대로 들립니다. 네가 뭘하고 있었는지 모르겠다.

var svg = document.querySelector('svg'); 
 

 
var inputs = document.querySelectorAll('input'); 
 

 
var height_elem = inputs[0]; 
 
var width_elem = inputs[1]; 
 

 
height_elem.value = '100'; 
 
width_elem.value = '100'; 
 

 
height_elem.addEventListener("change", valueChange); 
 
width_elem.addEventListener("change", valueChange); 
 

 
function valueChange() { 
 
    svg.setAttribute('viewBox', "0 0 "+width_elem.value+" "+height_elem.value); 
 
} 
 

 
valueChange();

#out { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: honeydew; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="main"> 
 
    <div id="in"> 
 
     <input type="number"><br> 
 
     <input type="number"> 
 
    </div> 
 
    <div id="out"> 
 
     <svg> 
 
      <rect width="100%" height="100%"></rect> 
 
     </svg> 
 
    </div> 
 
</div>

Answer 2

var rect = document.querySelector('rect'); 
 
var svg = document.querySelector('svg'); 
 

 
var inputs = document.querySelectorAll('input'); 
 

 
var height_elem = inputs[0]; 
 
var width_elem = inputs[1]; 
 

 
height_elem.value = '100'; 
 
width_elem.value = '100'; 
 

 
height_elem.addEventListener("change", valueChange); 
 
width_elem.addEventListener("change", valueChange); 
 

 
function valueChange() { 
 
max = parseInt(height_elem.value) >= parseInt(width_elem.value) ? 'h' : 'w'; 
 
if (max == 'h') { 
 
\t rect.setAttribute('height', "100%"); 
 
\t rect.setAttribute('width', (width_elem.value * 100/height_elem.value)+"%"); 
 
} 
 
else { 
 
\t rect.setAttribute('width', "100%"); 
 
\t rect.setAttribute('height', (height_elem.value * 100/width_elem.value)+"%"); 
 
} 
 
} 
 

 
valueChange();

#main { 
 
width: 100%; 
 
padding: 0; 
 
} 
 

 
#in { 
 
float: left; 
 
width: 40%; 
 
height: 100% 
 
} 
 

 
#out { 
 
margin: 10%; 
 
width: 20vw; 
 
height: 20vw; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="main"> 
 
<div id="in"> 
 
    Height: <input type="number"><br> 
 
    Width: <input type="number"> 
 
</div> 
 
<br> 
 
<div id="out"> 
 
    <svg height="auto"> 
 
    <rect></rect></svg> 
 
</div> 
 
</div>

이이 문제를 해결합니까 : 여기

내 편집기 설치와 바이올린입니까?