스케치의 내 보낸 SVG를 반응 적으로 만드는 올바른 방법은 무엇입니까?

Question

내 사이트에서 svgs를 사용하는 법을 배우고 있습니다.

셰이프에 대한 코드를 만드는 동안 반응 형으로 만들기 쉽습니다. Sketch.app에서 내 보낸 SVG와 동일한 기술을 사용하려고 할 때 작동하지 않습니다. 누구나 왜 그런지 말할 수 있니? 스케치로 만든 모양 :

첫째 : 모양 하드 코딩 : here

초 여기

2 예이다 here

내가이 CSS 코드를 사용하고 내 목표를 달성하기 :

을

.svg-container { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    max-width:1102px; 
    padding-bottom: 31%; /** height/width **/ 
    vertical-align: middle; 
    overflow: hidden; 
} 

.svg-content { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 1

스케치 SVG는 너비와 높이가 하드 코드되어 있습니다 :

<svg class="svg-content" width="1102px" height="348px" 

응답 성을 높이려면 너비와 높이를 모두 "100%"으로 변경하십시오. 또는 완전히 제거 할 수 있습니다. 기본값은 100 %이므로 기본값과 동일합니다.