SVG 이미지가 IE11에서 나올 때 viewBox 속성을 부여하면 수정되었습니다.
현상에 대해
SVG 화상을 ![]()
태그로 표시하고 있었을 때, IE11로 표시 확인하면, 화상이 깨져 표시되어 있었다.
※실장한 이미지
<span style="background: #db365d; display: block; height: 24px; padding: 6px 0 0; width: 30px;">
<img src="heart.svg" alt="Heart" style="width: 18px; height: auto;">
</span>
정상적인 아이콘
IE11의 아이콘
해결한 것
이미지의 width 와 height 에 맞추어, viewBox 속성과 값을 넣었다.viewBox="x座標, y座標, width, height" 와 같이, viewBox="0, 0, 20, 19" 로 했다.
(나중에 height 의 소수점을 지웠습니다)
(그리고, preserveAspectRatio="xMinYMid" 도 넣어 보았다)
BEFORE
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19.062">
<path...略 />
</svg>
AFTER
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" preserveAspectRatio="xMinYMid" viewBox="0 0 20 19">
<path...略 />
</svg>
gulp-imagemin을 사용할 때
(2019/10/24 추가)
gulp-imagemin은 표준 설정에서는 이미지를 경량화하기 위해 viewBox 속성을 지우므로,removeViewBox: true를 false로 변경했습니다.
참고:
htps //w w. 음 pmjs. 코 m / Pac 카게 / 구 lp 이마게 민
Reference
이 문제에 관하여(SVG 이미지가 IE11에서 나올 때 viewBox 속성을 부여하면 수정되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sararilfy/items/20d9062cdffdd4b817be
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<span style="background: #db365d; display: block; height: 24px; padding: 6px 0 0; width: 30px;">
<img src="heart.svg" alt="Heart" style="width: 18px; height: auto;">
</span>
이미지의 width 와 height 에 맞추어,
viewBox 속성과 값을 넣었다.viewBox="x座標, y座標, width, height" 와 같이, viewBox="0, 0, 20, 19" 로 했다.(나중에
height 의 소수점을 지웠습니다)(그리고,
preserveAspectRatio="xMinYMid" 도 넣어 보았다)BEFORE
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19.062">
<path...略 />
</svg>
AFTER
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" preserveAspectRatio="xMinYMid" viewBox="0 0 20 19">
<path...略 />
</svg>
gulp-imagemin을 사용할 때
(2019/10/24 추가)
gulp-imagemin은 표준 설정에서는 이미지를 경량화하기 위해 viewBox 속성을 지우므로,removeViewBox: true를 false로 변경했습니다.
참고:
htps //w w. 음 pmjs. 코 m / Pac 카게 / 구 lp 이마게 민
Reference
이 문제에 관하여(SVG 이미지가 IE11에서 나올 때 viewBox 속성을 부여하면 수정되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sararilfy/items/20d9062cdffdd4b817be
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(SVG 이미지가 IE11에서 나올 때 viewBox 속성을 부여하면 수정되었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sararilfy/items/20d9062cdffdd4b817be텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
