動態縮放SVG

Question

我正在一個網站上，用戶可以通過幾個文本框操縱SVG圖像。 我想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>

這是否解決問題了嗎？