我正在使用带有蒙版的SVG来创建蒙版效果(需要从IE11 +开始工作)。我在PNG中有一个序列,该序列使用蒙版并为X属性设置了动画。它在所有浏览器中都可以正常工作,并且动画在IE中也可以,但是遮罩的缩放比例会改变。即使设置了宽度,它就像是原始宽度的1/3。
应如何显示: https://i.imgur.com/kF4YcMf.jpg
外观: https://i.imgur.com/O0XUqb0.png
我的SVG代码
<svg width="640" height="360" baseProfile="full" version="1.2">
<defs>
<mask id="svgMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
<image id="maskImage" width="35840" height="360" xlink:href="assets/img/mask-high.png" y="0" x="-6400"/>
</mask>
</defs>
<image id="titleImage" width="640" height="360" xlink:href="assets/img/doggy.jpg" mask="url(#svgMask)" y="0" x="0"/>
</svg>