SVGポリラインが反応します

Question

したがって、次の例があります - https://jsfiddle.net/po2kddf4/です。私はそれを全幅にしたいと思います。したがって、望ましい結果は、svgポリラインが100％の高さと100％の幅をカバーすることです。

HTML：

.block { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
}

<div class="block"> 
 
    <svg id="SvgjsSvg1071" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"> 
 
    <defs id="SvgjsDefs1072"></defs> 
 
    <polyline id="SvgjsPolyline1073" points="10,10 100,10 100,200 10,200 10,10" fill="#ffa500" stroke="#000000" stroke-width="4" style="cursor: pointer;"><title>Test 1</title></polyline> 
 
    <polyline id="SvgjsPolyline1074" points="100,10 200,10 200,50 250,50 250,150 100,150 100,10" fill="#ffa500" stroke="#000000" stroke-width="4" style="cursor: pointer; opacity: 1;"><title>Test 2</title></polyline> 
 
    </svg> 
 
</div>

したがって、上記の画像結果を、所望されるであろう。画像サイズの割合は、ブロックの全幅に一致するように変更されます。

Answer 1

溶液を見いだした。他の誰かが将来検索する場合 -

この場合、私たちは最後の2桁に興味があったので、viewBox="0 0 250 200"はトリックをうまくやったことがあります。 250は最大x座標、200は最大y座標です。