만드는 방법

만드는 방법

---

목표는 <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"으로 설정하는 것입니다. 이 속성에 대한 추가 정보가 필요한 경우 여기에 좋은 링크가 있습니다. 그게 전부입니다.

One more thing is that this code works on almost all the major browsers even the old ones but on some versions of android and ios you need to use some javascrip/jQuery code to keep it consistent. I use the following in document ready and resize functions:

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

Hope it helps!

---

What's worked for me recently is to remove all height="" and width="" attributes from the <svg> tag and all child tags. Then you can use scaling using a percentage of the parent container's height or width.

---

@robertc has it right, but you also need to notice that svg, #container causes the svg to be scaled exponentially for anything but 100% (once for #container and once for svg).

In other words, if I applied 50% h/w to both elements, it's actually 50% of 50%, or .5 * .5, which equals .25, or 25% scale.

@robertc가 제안한 것처럼 하나의 선택기가 잘 작동합니다.

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

---

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

"width=device-width"

참고 URL : https://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container