Question

我使用CSS将背景SVG与CSS放在一个响应元素中，并使用以下代码：

＆＃13;

var theSVG = '<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve" preserveAspectRatio="xMinYMin"><g><path fill="#888888" d="M218.7,272.5l-38.6-80.6c-0.4-1.1-1.6-1.1-2.8-0.7l-23.4,8.8h-7.8l-23.4-8.8c-1.1-0.4-2.4-0.1-2.8,1 l-38.6,80.4c-0.4,1.1,0.2,2.3,1.3,2.7l2.4,0.8c1.1,0.4,2.4-0.2,2.8-1.3l49.5-56.9l8.5,77.9c0,1.2,1,2.3,2.2,2.3h3.2 c1.2,0,2.2-1.1,2.2-2.3l8.6-79l50.2,58c0.4,1.1,1.6,1.7,2.8,1.3l2.4-0.8C218.5,274.8,219.1,273.6,218.7,272.5z"/><path fill="#555555" d="M184.2,2h-66.5C108.1,2,100,9.7,100,19.4v103c0,8,5.5,14.8,12.8,16.9c-1.3,1.2-2.2,2.8-2.2,4.7l7.8,52 c0,3.5,2.9,6.9,6.3,6.9h50.9c3.5,0,6.3-3.4,6.3-6.9l9.3-51.7c0-1.9-0.3-3.7-1.6-4.9c7.4-2.1,13.3-9.1,13.3-17.1v-103 C203,9.7,194,2,184.2,2z M192,112.9c0,3.4-2.7,6.1-6.1,6.1h-67.7c-3.4,0-6.1-2.7-6.1-6.1V19.1c0-3.4,2.7-6.1,6.1-6.1h67.7 c3.4,0,6.1,2.7,6.1,6.1V112.9z"/><path fill="#888888" d="M205.6,184.5H96.5c-1.3,0-2.3-1.1-2.3-2.3v-9c0-1.3,1.1-2.3,2.3-2.3h109.1c1.3,0,2.3,1.1,2.3,2.3v9 C207.9,183.5,206.8,184.5,205.6,184.5z"/><g><path fill="#AAAAAA" d="M119.9,151h-28c-2.9,0-5.2-2.3-5.2-5.2V31.4c0-2.9,2.3-5.2,5.2-5.2h28c2.9,0,5.2,2.3,5.2,5.2v114.5 C125.1,148.7,122.8,151,119.9,151z"/><path fill="#AAAAAA" d="M210.2,151h-28c-2.9,0-5.2-2.3-5.2-5.2V31.4c0-2.9,2.3-5.2,5.2-5.2h28c2.9,0,5.2,2.3,5.2,5.2v114.5 C215.3,148.7,213,151,210.2,151z"/><path fill="#AAAAAA" d="M151,91c-13.1,0-23.8-10.7-23.8-23.8s10.7-23.8,23.8-23.8s23.8,10.7,23.8,23.8S164.1,91,151,91z M151,52.1 c-8.3,0-15.1,6.8-15.1,15.1s6.8,15.1,15.1,15.1c8.3,0,15.1-6.8,15.1-15.1S159.4,52.1,151,52.1z"/></g></g></svg>';
var theSVG64 = window.btoa(theSVG);
document.getElementById('svgholder').style.backgroundImage = "url('data:image/svg+xml;base64,"+theSVG64+"')";

＆＃13;

.svgholder {
  background-color: #444;
  /* background-image: url("path-to-my-svg.svg"); */
  /* On the site the svg is specified above, but for this example I'm setting the data with JS so the contents can be seen un-base64 encoded */
  background-size: auto 130%;
  background-repeat: no-repeat;
  background-position: left 10% top 20%;
  width: 80%;
  min-width:640px;
  min-height:300px;
  margin: auto;
  padding: 1em;
  color: whitesmoke;
}

＆＃13;

<div class="svgholder" id="svgholder">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

＆＃13;

如果在除IE之外的任何现代浏览器中查看此内容，则background-position: left 10% top 20%属性会使SVG将向右移动10％，并向上移动20％。在IE（10/11）中，它将左向前移动了10％并向上移动了20％。

如果设置了负百分比，即background-position: left -10% top 20%则发生相反的情况。请注意，top 20%在所有情况下呈现相同的内容。

您会在此处看到我使用四值语法，但如果它是双值，则会发生同样的情况。即background-position: 10% 20%;

我想知道这是一个IE错误，如果有一个解决方法会让IE的行为与其他人一样。

Bonus oddity：如果在SVG中设置preserveAspectRatio="none"，则效果会反转。 IE＆＃39;添加＆＃39;百分比设定，其他人从该位置减去它。

IE反转了预期SVG的背景位置行为百分比

0 个答案: