css - svg 背景在 IE 中以不同方式旋转

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 .

对于旋转使用 transform="rotate(-30)"在 <image>在 SVG 中。

所以，在每个 <li>你将拥有 SVG。它将同样有效 在所有浏览器中。