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

해결책을 찾았습니다. 다른 사람이 앞으로 검색 할 경우 -

svg 태그에 viewBox 매개 변수를 추가 할 수 있습니다.이 경우 우리는 마지막 두 자리수에 관심을 가졌으므로 viewBox="0 0 250 200" 트릭을 잘 수행했습니다. 250은 최대 x 좌표이고 200은 최대 y 좌표입니다.