<svg> 요소를 부모 컨테이너로 확장하거나 축소하는 방법은 무엇입니까?

목표는 <svg>해당 컨테이너의 크기에 <div>관계없이 요소를 상위 컨테이너 (이 경우 a)의 크기로 확장하는 것입니다.

코드:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

이 문제에 대한 가장 일반적인 해결책 viewBox은 <svg>요소에 속성을 설정하는 것 같습니다 .

viewBox="0 0 widthOfContainer heightOfContainer"

그러나 요소 내의 <svg>요소에 미리 정의 된 너비 및 / 또는 높이가 있는 경우에는 작동하지 않는 것 같습니다 . 예를 들어, <rect>위 코드에서 요소에는 너비와 높이가 명시 적으로 설정되어 있습니다.

따라서 분명한 해결책은 해당 요소에도 % 너비와 % 높이를 사용하는 것입니다. 하지만이 작업을해야합니까? 특히, <img src=test.svg >잘 작동하고 명시 적으로 설정된 <rect>높이와 너비로 문제없이 확장 / 축소 되기 때문에 .

요소 원한다면 <rect>, 그것과 같은 다른 요소가, 그 폭 및 백분율로 정의 높이를 가져야 잉크 스케이프 그래서 세트에있는 방법이 있음을 모두 가진 요소 <svg>문서 사용 비율 폭, 높이, 등 대신 고정 기준 ?

은 viewBox이 도면의 크기의 컨테이너의 높이가 아닙니다. 사용자 정의 viewBox사용자 정의 다음, 폭에있을 100 단위를 rect10 개 단위로. 그 후에는 SVG 크기 rect를 조절해도 이미지 너비의 10 %가됩니다.

다음과 같은 SVG가 있다고 가정합니다.

그리고 나는 그것을 div에 넣고 반응 적으로 div를 채우고 싶습니다. 내 방법은 다음과 같습니다.

먼저 inkscape와 같은 응용 프로그램에서 SVG 파일을 엽니 다. 파일-> 문서 속성에서 문서의 너비를 800px로, 높이를 600px로 설정했습니다 (다른 크기를 선택할 수 있음). 그런 다음 SVG를이 문서에 맞 춥니 다.

그런 다음이 파일을 새 SVG 파일로 저장하고이 파일에서 경로 데이터를 가져옵니다. 이제 HTML에서 마법을 수행하는 코드는 다음과 같습니다.

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

SVG의 너비와 높이는 컨테이너를 수직 및 수평으로 채우고 싶기 때문에 모두 100 %로 설정되어 있지만 viewBox의 너비와 높이는 잉크 스케이프에서 문서의 너비와 높이 (800px X)와 동일합니다. 600px. 다음으로해야 할 일은 preserveAspectRatio를 "none"으로 설정하는 것입니다. 이 속성에 대한 자세한 정보가 필요한 경우 여기에 좋은 정보가 있습니다. 링크가 있습니다. 그게 전부입니다.

한 가지 더,이 코드는 이전 브라우저에서도 거의 모든 주요 브라우저에서 작동하지만 일부 버전의 Android 및 iOS에서는 일관성을 유지하기 위해 javascrip / jQuery 코드를 사용해야합니다. 문서 준비 및 크기 조정 기능에서 다음을 사용합니다.

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

도움이 되었기를 바랍니다.

무엇 최근에 나를 위해 일한 것은 모두 제거하는 것입니다 height=""및 width=""으로부터 속성 <svg>태그 및 모든 자식 태그입니다. 그런 다음 부모 컨테이너 높이 또는 너비의 백분율을 사용하여 크기 조정을 사용할 수 있습니다.

@robertc 권리를 가지고 있지만, 당신은 통지 할 필요 svg, #container를위한 무엇이든하지만 100 % (기하 급수적으로 확장 할 수있는 SVG의 원인 #container과에 한 번svg ).

즉, 두 요소에 50 % h / w를 적용하면 실제로 50 %의 50 % 또는 .5 * .5, 즉 .25 또는 25 % 배율과 같습니다.

@robertc가 제안한대로 사용하면 하나의 선택기가 제대로 작동합니다.

svg {
  width:50%;
  height:50%;
}

당신의 아이폰을 위해 당신은 당신의 머리 balise에 사용할 수 있습니다 :

"width=device-width"