Как повернуть 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, самое важное: я поместил бутылочную жидкость внутрь элемента ag, и я наложил маску на элемент g, а преобразование - на бутылочную жидкость.Я надеюсь, что это помогает.

<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>
      
      
        <mask id="mask-2" fill="white">
            <use xlink:href="#bottle-outline"></use>
        </mask>
      
    </defs>
    <g id="bottle" stroke-width="5" stroke="#916548" fill="none" fill-rule="evenodd">
        <rect id="bottle-lid"  x="82.5" y="52.5" width="35" height="15" rx="5"></rect>
        <rect id="bottle-holder"  x="117.5" y="55.5" width="30" height="7" rx="3.5"></rect>
        <g mask="url(#mask-2)">
        <rect id="bottle-liquid" stroke="none" fill="#3498DB"  x="40" y="80" width="120" height="120" transform="rotate(20 100 140)"></rect>
        </g>
        <rect id="bottle-outline" x="77.5" y="67.5" width="45" height="95" rx="5"></rect>
    </g>
</svg>