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 중국어 웹사이트의 기타 관련 기사를 참조하세요!