Question

我正在尝试使用svg图像创建跨浏览器宝丽来效果，如图所示 http://www.sitepoint.com/examples/svg/gallery.php

如果您使用的是IE9，您应该首先注意到问题 - svg背景在IE中的旋转方式不同。问题仅出现在IE中，似乎与background-size属性有关。如果我切换IE背景大小并旋转属性，IE开始正确显示所有内容！

有没有人解决这个问题？

我暂时使用的CSS：

.image img {

    border: 0px solid #000;
    background-color: #fff;
    height:275px;
    background: url(/test/images/polaroid.svg);
    -moz-background-size: 100% 100%;
    background-size: 100% 100% ;
    margin: 25px auto 45px 35px;
    display:inline-block;
    padding:4% 5.5% 6% 4%;
    list-style: none;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);

}

我在这里只讨论IE9！对于7和8我使用progid：DXImageTransform.Microsoft.Matrix

Answer 1

如果您使用SVG作为背景 - 那么您可以在SVG上执行所有内部图片。对于IE8-使用svgweb。

对于轮换，请在SVG内的transform="rotate(-30)"上使用<image>。

所以，在每个<li>你都会有SVG。它将平等地运作在所有浏览器中。

svg背景在IE中旋转不同

1 个答案: