SVG 요소를 상위 컨테이너와 함께 확장 및 축소하는 방법은 무엇입니까?

SVG 요소를 상위 컨테이너로 확장 및 축소

SVG 요소가 상위 컨테이너의 크기에 맞게 확장 또는 축소되도록 하는 것이 과제입니다. 컨테이너 크기에 관계없이.

일반적인 해결 방법: viewBox

널리 사용되는 해결 방법은 SVG 요소에 viewBox 속성을 설정하는 것입니다. 그러나 SVG 내의 하위 요소가 고정된 너비 또는 높이를 갖는 경우 이는 효과적이지 않을 수 있습니다.

백분율 기반 요소 크기

대체 접근 방식은 백분율을 사용하는 것입니다. SVG 내 요소의 너비와 높이를 기반으로 합니다. 이는 특정 요소 크기에도 불구하고 원활하게 확장 및 축소되는 를 사용하는 내장형 SVG의 동작을 반영합니다.

Inkscape 백분율 설정

백분율 기반 크기가 선호되므로 Inkscape의 기본 설정을 수정하는 것이 좋습니다. "개체" 메뉴에서 "크기 조정" 옵션을 찾아 "크기 조정 기준: 백분율"을 활성화합니다. 이렇게 하면 SVG 내에서 생성된 모든 요소에 백분율 기반 크기가 적용됩니다.

백분율 기반 크기가 포함된 예제 코드

업데이트된 코드 예제는 다음과 같습니다.

<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="10%" height="10%" />
    </svg>
</div>

이렇게 하면 SVG 내의 직사각형이 상위 컨테이너의 크기에 비례하여 확장 및 축소됩니다.

위 내용은 SVG 요소를 상위 컨테이너와 함께 확장 및 축소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!