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

SVG가 IE에서 제대로 확장되지 않음 - 추가 공간이 있음

문제: 응답성을 위해 SVG 기호를 사용할 때 Internet Explorer에서 SVG의 크기가 제대로 조정되지 않습니다. (IE).

답변: IE에는 너비와 높이를 모두 지정하지 않으면 SVG의 크기가 올바르게 조정되지 않는 버그가 있습니다.

해결책:

니콜라스가 발견한 트릭을 사용하세요 Gallagher:

1. <캔버스> SVG와 동일한 종횡비를 가진 요소와 <div> SVG를 포함합니다.
2. <캔버스> 가시성과 함께 보이지 않음: 숨김.
3. SVG를 <div> 너비를 100%로 설정합니다.

코드:

<div>

CSS:

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

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

참고: 이 트릭은 IE가 SVG를 확장하도록 강제합니다. 참고로.

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