css - SVG <mask> -cag childs用css转换

我有一个带有css样式表的SVG文档

mask .show { fill: white }
mask .hide { fill: black }

@keyframes resize {
    0% { transform: scaleX(.5) }
    50% { transform: scaleX(1.25) }
    100% { transform: scaleX(.5) }
}

mask .resize { animation: resize 10s ease infinite; transform-origin: 10px 50px }

并使用面具

<mask id="oneMask">
    <rect class="show" x="0" y="0" width="100%" height="100%" />
    <ellipse class="hide resize" cx="10" cy="50" rx="10" ry="50" />
</mask>

这个掩模中的椭圆会变成黑色，但不会调整大小，我想要它。

CSS正在运行，@ keyframes可以动画任何内容 - 除了CSS中的transform:之外的所有内容。

请参阅此处查看jsFiddle

请帮我用CSS动画和转换它，谢谢！！！

SVG <mask> -cag childs用css转换

0 个答案: