svg 배경 이미지 위치는 background-position : left center에도 불구하고 항상 Internet Explorer에서 중앙에 위치합니다.

svg 배경 이미지 위치는 background-position : left center에도 불구하고 항상 Internet Explorer에서 중앙에 위치합니다.

---

SVG 로고를 배경 이미지로 사용하고 있는데 Internet Explorer (편집 : 및 Safari) 에서 왼쪽에 올바르게 정렬되지 않는 것 같습니다 .

컨테이너는 다음과 같습니다.

<div id="header">
    <div id="logo"></div>
</div>

스타일 :

#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

<div>가 부모의 100 %에 걸쳐 야하지만 요소 왼쪽에 로고가 표시되어야 함을 알 수 있습니다 . 이것은 Chrome과 Safari에서 잘 작동하지만 로고는 항상 <div id="logo">IE의 중앙에 있습니다 .

이것에 대한 정보를 찾기가 정말 어려운 것 같습니다. 다른 사람이 같은 문제를 가지고 있습니까?

다음 은 문제 의 예제 버전에 대한 링크 입니다. 녹색 상자는 SVG입니다.

---

문제는 CSS가 아니라 SVG에 있습니다. SVG는 예상대로 전체 요소 상자의 배경을 채우도록 커집니다. SVG 스케일이 제어 요소가되는 방법 :

요소 viewBox="0 0 width height"에 (픽셀 단위) 속성을 설정하고 <svg>해당 width및 height속성을 제거하십시오 . 또한 요소에 대해 설정 preserveAspectRatio="xMinYMid"(x / 세로 왼쪽 정렬, y / 가로 가운데 정렬)해야합니다 svg. 이것은 적어도 Internet Explorer 10 및 11에서 작동합니다.

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

preserveAspectRatio 및 viewBox 속성 에 대해 자세히 알아보십시오 . 소스, IEblog의 "SVG 시작하기" .

---

제 경우에는 "너비"및 "높이"값을 추가하면 ie9-11의 문제가 해결되었습니다.

---

허용되는 대답은 작동하지만 여기에 또 다른 해결책이 있습니다.

SVG에 치수를 포함하여 뷰 박스 치수와 동일하도록하는 것도 트릭입니다.

width="496px" height="146px" viewBox="0 0 496 146" 

저와 비슷하고 Illustrator에서 SVG를 편집 / 저장하는 경우 저장 대화 상자의 고급 옵션에서 "반응 형"확인란을 선택 취소합니다. 그런 다음 치수가 포함됩니다.

(확장 가능하기 때문에 정의상 '반응 형'입니다. 따라서이 설정은 약간 중복 된 것 같습니다.)

---

배경 크기를 지정하면 IE에서 작동합니다.

아래는 샘플 코드입니다.

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}

---

IE 8-11은 반복되지 않는 배경에 SVG를 배치 할 때 자동으로 왼쪽과 오른쪽을 균등하게 조정하여 크기를 조정합니다. 이는 이미지 레벨에서 이미지의 중심 효과를 만듭니다. 의미 : 이미지 양쪽의 공백을 확장하여 컨테이너를 채 웁니다.

그러면 새 이미지는 해당 요소 너비의 100 %가됩니다. 이것이 position : left가 효과가없는 이유입니다. 이미 패딩이 포함되어 있습니다.

배경 요소의 컨테이너는 과도한 확장을 방지하기 위해 제한되어야합니다 (쉬밍을 통해). 예 : 최대 너비

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

이미지는 여전히 140px 내에서 중앙에 위치하지만 더 이상 해당 지점을 넘어 떠 내리지 않습니다.

---

해결책 : 다른 .svg를 시도하십시오. 여기에 샘플 헤드가 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">

---

다음 줄은 svg를 중심이 아닌 요소로 바꿀 수 있습니다.

display: inline-block;

여전히 가장 이상적인 솔루션은 아니지만 작동합니다.

참고 URL : https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b