我可以将 svg 元素的某些部分隐藏在另一个元素后面吗？

发布于 2025-01-14 17:15:25 字数 901 浏览 0 评论 0原文

所以我有一个 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。

原文

So I have the svg file which I want to animate using 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>

and want to basically animate the 'wave' path inside the window so it looks like it has a continuous motion. I tried nesting multiple svgs but that did not work because the innermost svg will be painted first and thus everything else will be painted over it.
And so I thought this could maybe work but it seems like I cannot use the 'transform: translate' in an animation. Is there a way to hide the edges of the wave like layers so I can only show the wave moving as if behind a window inside the outer rectangle?

PS: I cannot use CSS or JavaScript, just standard svg.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉服软 2025-01-21 17:15:25

使用剪切路径（或蒙版）隐藏边缘。

<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>

现在，当您翻译时，路径仅显示在白色矩形元素内。

Use a clipping path (or mask) to hide the edges.

<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>

Now when you translate the path only shows within the white rect element.

回复收藏 0 原文

~没有更多了~