IE11中的SVG蒙版比例和缩放

时间:2018-08-17 05:32:16

标签: html html5 svg

我正在使用带有蒙版的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>

0 个答案:

没有答案