배경 위치가 IE에 적용되지 않았습니다.

Question

배경 위치를 설정하면 Chrome, Safari, Firefox에서는 작동하지만 Internet Explorer 8-11에서는 작동하지 않습니다. 여기 뭐가 잘못 됐니?

DEMO on Dabblet

DEMO on Webdevout

.logo { 
    display: block; 
    width: 200px; 
    border: 2px solid red; 
    background: url("layout/logo.png") center right no-repeat; /* fallback image */ 
    background-image: url('data:image/svg+xml;base64,...'), none; /* two bg to only use svg on supported browsers. IE 11 uses this image */ 
    background-position: center right; 
    background-repeat: no-repeat; 
    background-size: auto 100%; 
} 

UPDATE :

IE는 SVG 이미지의 배경 위치를 무시하는 것 같다. 여기에 WORKAROUND DEMO

Answer 1

내가 크로스 브라우저 작업의 보증과 함께이 일을하는 가장 좋은 방법 다음 패턴을 사용하여 배경 이미지를 만들고입니다 당신으로 위치를 x, y, width 또는 height 같은 속성을 설정 추측입니다 예를 들면 attr JQuery와 방법을 통해 직접 또는 이후 원한다 $("#img1").attr("width","500");

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
     <image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" /> 
    </pattern> 
</defs> 

이

<path fill="url(#img1)" id="my_svg" d="M5,50 l0,100 l100,0 l0,-100 l-100,0 
    M215,100 
    a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 
    M265,50 
    l50,100 l-100,0 l50,-100 
    z"/> 

,617,451 SVG와 같은 경로를 채우는 패턴을 설정할

또는 내가 가하지 않는 것이 좋습니다 다른 방법도 있습니다 바로이 방법 만이

#my_svg{ 
    fill:url(#img1); 
} 

같은 CSS의 배경을 설정할 수 있지만 어떤 경우에는 해답이 될 수 있으며,

<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100" patternTransform="translate(0,0)"> 
     <image xlink:href="layout/logo.png" x="0" y="0" width="100" height="100" transform="translate(0,0)" /> 
    </pattern> 

어쨌든 항상 좋은 연습이 예 it..for 경우 그 패턴 이미지의 transform="translate(x,y)" 또는 CSS 버전처럼 종료되는 패턴에 대한 patternTransform="translate(x,y)"입니다 우리 직장에서 살아남을 수있는 여러 가지 방법을 알고 ;-)