[css] IE9-10에서 SVG를 사용한 배경 크기

Program / 글쓴이

배경 이미지로 설정된 div가 있습니다.

<div>Play Video</div>

다음 CSS로 :

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

배경 크기는 Firefox, Safari 및 Chrome에서 적용됩니다. IE8에서 SVG는 PNG 파일로 대체됩니다. 그러나 IE9 및 IE10에서는 SVG 파일의 크기가 크게 줄어 듭니다. 문제는 div의 너비와 높이와 관련된 것 같습니다. 150px의 높이를 추가하면 SVG가 제대로 렌더링됩니다. 더 작게 만들면 (즉, 100px) 그래픽이 축소되기 시작합니다.

누구든지 Explorer에서이 문제를 해결하는 방법을 찾았습니까? IE에게 div의 너비와 높이에 관계없이 background-size 값을 사용하도록 지시하는 방법이 있습니까?

답변

SVG에 width및 height지정 되어 있는지 확인하십시오 . Illustrator에서 생성하는 경우이 옵션은 너비와 높이를 제거하므로 “반응 형”상자가 선택 해제되어 있는지 확인하십시오.

답변

mbxtr이 거의 효과가 있다고 말했듯이 SVG에 너비와 높이를 추가했습니다. preserveAspectRatio="none slice"IE에서 반응 형으로 작동 하도록 추가 해야했습니다.

답변

나를 위해 다음 세 가지 수정 사항이 도움이되었습니다.

  • 가능하면 배경 위치를 “중앙”으로 설정하십시오.
  • background-size의 경우 두 값을 모두 설정하면 “100 % auto”가 트릭을 수행하지 않으므로 “100 % 100 %”를 사용합니다.
  • 그래도 SVG 자체의 “viewBox”속성 값을 마지막으로 변경하는 데 도움이되지 않고 SVG의 너비와 높이보다 한 픽셀 더 넓고 높게 만듭니다. 이렇게하면 SVG가 약간 줄어들지 만 IE가 잘라내는 것을 막고 더 작은 크기는 전혀 눈에 띄지 않습니다.

답변

이 문제가 있었는데 svg의 코드 내에서 높이 와 너비를 제거 하지만 viewBox를 유지하면 문제를 해결할 수 있음을 발견했습니다.

https://jakearchibald.github.io/svgomg/
와 같은 컴파일러 사이트를 사용 하고 옵션을 “높이와 너비보다 viewBox 선호”로 설정하는 것이 좋습니다.

또한 이것이 작동하지 않는 경우 Illustrator에서 svg 이미지 주위에 정사각형 배경을 적용하고 가장자리 주위에 충분한 패딩을 남겨 둡니다.

그리고-> data uri : … 예를 사용하여 스타일 시트에서 svg를 가져옵니다.

background-image : data-uri ( ‘image / svg + xml; charset = UTF-8’, ‘where / your / svg / is / located’);

답변

음, 해결책이없는 것 같습니다. 놀라운 놀라움. 결국 IE입니다. 결국 다음 코드를 사용했습니다.

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

나는 더 깨끗한 버전을 더 좋아했지만,이 해킹은 IE8, 9, 10을 포함한 모든 최신 브라우저에서 작동합니다 (아마도 11이지만 테스트하지는 않았습니다).

답변

포함 된 요소의 전체 사이트가 아닌 SVG 배경 이미지 (예 : 검색 입력의 왼쪽에있는 돋보기)에서 유사한 문제가 발생했습니다.

Illustrator CC에서 SVG를 만들었지 만 Peter Collingridge의 SVG 옵티 마이저를 통해 실행하여 불필요한 모든 부분을 제거했습니다. http://petercollingridge.appspot.com/svg-optimiser

답변

@mbxtr의 솔루션을 시도했습니다.

SVG에 너비와 높이가 지정되어 있는지 확인하십시오. Illustrator에서 생성하는 경우이 옵션은 너비와 높이를 제거하므로 “반응 형”상자가 선택 해제되어 있는지 확인하십시오.

Windows Chrome 및 IE에서는 여전히 작동하지 않았습니다. 글꼴 아이콘을 내보내고 있었으므로 글꼴이있는 경우 다음과 같이 내 보내야합니다.

  • “글꼴 : 윤곽선으로 변환”
  • 및 “반응은”거짓

나는 또한 만약을 대비해서 “minify”를 체크하지 않았다.