我可以将svg元素的某些部分隐藏在另一个元素后面吗？
我可以将svg元素的某些部分隐藏在另一个元素后面吗？
提问于 2022-03-15 14:48:06
因此，我有svg文件，我想使用SMIL动画：
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="2000" height="500" fill="grey" fill-opacity="0.5"/>
<rect x="800" y="50" width="400" height="400" fill="#ffffff" fill-opacity="1"/>
<path d="M-52.81,64.09 C153.43,212.09 349.81,-49.99 500.30,78.09 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #45a9fa" transform="translate(750 80)">
<animateTransform
attributeName="transform" type="translate"
from="550 80"
to="850 80"
dur="1s"
repeatCount="indefinite"
/>
</path>
</svg>
并希望基本上动画的‘波’路径在窗口内，所以它看起来像一个连续的运动。我尝试了嵌套多个svg，但这没有起作用，因为最内部的svg将首先被绘制，因此其他的东西都会被绘制在上面。因此，我认为这可能会奏效，但我似乎不能在动画中使用“转换:翻译”。是否有一种方法可以像层一样隐藏波浪的边缘，所以我只能显示波在外面矩形内的窗口后面移动的样子？
PS:我不能使用CSS或JavaScript，只是标准的svg。
回答 1
Stack Overflow用户
发布于 2022-03-15 15:09:21
使用剪裁路径(或掩码)隐藏边缘。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 500">
<defs>
<clipPath id="clip">
<path d="M-52.81,64.09 C153.43,212.09 349.81,-49.99 500.30,78.09 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #45a9fa" transform="translate(750 80)">
</clipPath>
</defs>
<rect x="0" y="0" width="2000" height="500" fill="grey" fill-opacity="0.5"/>
<rect clip-path="url(#clip)" x="800" y="50" width="400" height="400" fill="#FFF" fill-opacity="1"/>
</path>
<animateTransform attributeName="transform" type="translate" from="550 80" to="850 80" dur="1s" repeatCount="indefinite"/>
</svg>
现在，当您翻译路径时，只显示在白色rect元素中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71484226
复制相关文章
相似问题
腾讯云开发者
