> 웹 프론트엔드 > CSS 튜토리얼 > Internet Explorer에서 내 SVG의 크기가 올바르게 조정되지 않는 이유는 무엇입니까?

Internet Explorer에서 내 SVG의 크기가 올바르게 조정되지 않는 이유는 무엇입니까?

DDD
풀어 주다: 2024-12-31 20:30:15
원래의
973명이 탐색했습니다.

Why Are My SVGs Not Scaling Correctly in Internet Explorer?

너비와 높이 부족으로 인해 IE에서 SVG가 올바르게 크기 조정되지 않음

이 질문에서 사용자는 SVG에서 크기 조정 문제에 직면했습니다. 인터넷 익스플로러. 이 오류는 SVG에 명시적인 너비 및 높이 속성이 없기 때문에 발생합니다.

해결책: 너비 및 높이 속성 제공

문제를 해결하기 위해 사용자는 다음을 사용했습니다. 숨겨진 <캔버스>를 사용하여 Nicolas Gallagher가 발견한 기술입니다. SVG에 필요한 가로 세로 비율을 제공하는 요소입니다.

구현:

  1. 너비와 높이 속성이 SVG 크기와 일치하도록 설정된 요소를 HTML에 추가합니다.
  2. 가시성을 숨김으로 설정하여 CSS를 사용합니다.
  3. SVG를 <div> CSS를 사용합니다.

CSS:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
로그인 후 복사

HTML:

<div>
로그인 후 복사

이 해결 방법을 구현합니다. , 사용자는 Internet Explorer의 크기 조정 문제를 성공적으로 해결하여 SVG를 표시할 수 있게 되었습니다. 맞습니다.

위 내용은 Internet Explorer에서 내 SVG의 크기가 올바르게 조정되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿