javascript - 如何在蒙版内旋转 SVG?
问题描述
我有一个 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 中的某个元素?
解决方案
我对您的 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>
推荐阅读
- python - 递归构建上三角矩阵
- vb.net - 如何将参数/过滤器传递给我的 DoCmd.OutputTo 方法?
- html - 点击标签选择标签文本并且不呈现 input:focus 事件
- c# - 使用 C# 的 SAP GUI 自动化 - sapfewse.ocx 是否有书面的开发人员文档或 api 库?
- json - 如何在弹性搜索中匹配每个数组项的多个字段
- gnuplot - 在 Gnuplot(5.3 开发版)中绘制一个 3-D 柱状图,在对数缩放的 y、z 轴上使用“可变”boxdepth(显示为固定宽度)列
- c++ - 哪些 OpenGL 函数在顶点着色器之前修改顶点位置?
- reference - “Foundation - ReferenceError:启动基础 zurb 项目时未定义 primordials。”
- python - Python 递归 Try-Except
- r - 如何在R中对具有不同范围值的多个列进行子集化?