Question

我正在尝试为两个图像图案之间的一些矩形的填充创建一个简单的过渡。

问题在于更改fill时它根本不会转换。仅使用纯色，过渡即可工作。

图像填充将立即改变。在我的浏览器开发工具中，过渡属性仍然存在，并且图像路径正确加载。

    <svg id="logo" >
        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="630">
            <image xlink:href="../assets/images/test/bg1.jpg" x="-100" height="630" width="1112"/>
        </pattern>
        <pattern id="img2" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="630">
            <image xlink:href="../assets/images/test/bg2.jpg" x="-100" height="630" width="1112"/>
        </pattern>
        <rect  x="173" y="32"   height="127"    width="137"/>
        <rect  x="0" y="195"    height="127"    width="137"/>
        <rect  x="0" y="358"    height="127"    width="137"/>
        <rect  x="173" y="195"  height="127"    width="137"/>
        <rect  x="173" y="358"  height="127"    width="137"/>
        <rect  x="0" y="521"    height="127"    width="137"/>
    </svg>

这是我非常简单的CSS。 仅使用颜色，但不能使用url()图片

，它可以正常工作并完美过渡

#logo rect {
    -webkit-transition: fill 1s;
    -moz-transition: fill 1s;
    -ms-transition: fill 1s;
    -o-transition: fill 1s;
    transition: fill 1s;
    fill: url(#img2);
}

#logo rect:hover {
    fill: url(#img1);
}

这是有效的SVG / css代码吗？使用fill时url()转换是否无效？还是因为它是<pattern>的ID？

请任何人帮助。

SVG无法过渡填充url（#img）

0 个答案: