動的スケーリング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>

これはあなたの問題を解決していますか？