반응 형 화면이 특정 화면을 때릴 때 SVG 이미지를 특정 크기로 만드는 방법은 무엇입니까?

Question

javascript를 사용해야하는지는 모르지만, 특정 화면 (예 : 640x480 픽셀)이 화면에 나타날 때 SVG 이미지를 특정 크기로 만들 수있는 방법은 무엇입니까?

내 SVG 이미지는 이미 반응 형이지만 모바일 디스플레이에서 더 작게 표시하고 싶습니다.

감사합니다.

Answer 1

당신처럼 CSS 무언가 섹션을 할 수 :

@media screen and (max-width: 480px) { 

    svg { 
    max-width: 200px; 
    max-height: 200px; 
    } 

} 

Answer 2

마크 업

<svg 
    width="120" 
    height="120" 
    viewBox="0 0 120 120" 
    xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="1000" height="1000"/> 
    </svg> 

</div> 

스타일

svg { /* make it generally responsive */ 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

.box { 
    max-width: 300px; 
} 

@media (min-width: 600px) { /* when 600px and bigger */ 
    .box { 
    max-width: 200px; 
    } 
} 

https://jsfiddle.net/sheriffderek/z9fw1ndr/