如何旋转面罩内的SVG？

Question

我有一个SVG遮罩，我想旋转其中的元素。但是，当我尝试使用它时，好像整个蒙版都在旋转。

我尝试过此SO post，但小提琴无法正常工作（图像不再显示）。 原来是这样

发生了什么

我想发生的事情

我只希望旋转“液体”元件，但是不知何故液体元件以错误的方式旋转。

这是SVG（带有遮罩元素）：

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <rect id="path-1" x="75" y="65" width="50" height="100" rx="5"></rect>
    </defs>
    <g id="bottle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="bottle-lid" stroke="#916548" stroke-width="5" x="82.5" y="52.5" width="35" height="15" rx="5"></rect>
        <rect id="bottle-holder" stroke="#916548" stroke-width="5" x="117.5" y="55.5" width="30" height="7" rx="3.5"></rect>
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <g id="Mask"></g>
        <rect id="bottle-liquid" fill="#3498DB" mask="url(#mask-2)" x="40" y="80" width="120" height="120"></rect>
        <rect id="bottle-outline" stroke="#916548" stroke-width="5" mask="url(#mask-2)" x="77.5" y="67.5" width="45" height="95" rx="5"></rect>
    </g>
</svg>

这是JS（我正在使用GSAP库）

const liquid = document.querySelector("#bottle-liquid")

const tl = new TimelineMax()

tl.to(liquid, 1, {
  rotation: 20
})

如何仅旋转蒙版SVG中的某个元素？

Answer 1

我对您的SVG进行了一些更改，这是最重要的：我已将瓶液放置在g元素内，并将遮罩应用于g元素，并将转换应用于瓶液。希望对您有所帮助。

https://www.googleapis.com/auth/calendar