如何将SVG形状掩盖到SVG图像

发布于 2025-02-09 06:04:57 字数 1697 浏览 1 评论 0原文

因此，基本上我有一个三角形的形状，我想在图像/gif中掩盖它。

            <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
            </svg>
                
            <div class="clipSvg2">
                <svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <mask id="mask11">
                            <!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
                            </svg>
                                 -->
                                
                        </mask>
                    </defs>
                    //Here add some mask=url(#mask11)
                    <image 
                    width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
                
                </svg>
            </div>

如您所见，我想在我的image中掩盖mask11，但我不能这样做..我在这里搜索了很多，它实际上没有工作i不知道该怎么做或怎么办？多谢。

原文

So basically I have a triangular shape and I want to mask it in an image/gif.

            <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
            </svg>
                
            <div class="clipSvg2">
                <svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <mask id="mask11">
                            <!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
                            </svg>
                                 -->
                                
                        </mask>
                    </defs>
                    //Here add some mask=url(#mask11)
                    <image 
                    width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
                
                </svg>
            </div>

As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.

分享到QQ

分享到微博

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

发布评论

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

空名 2025-02-16 06:04:57

我不确定应该是什么样的，但这里有两个例子。第一个使用剪辑路径。使用clip-rule =“ factodd”仅显示的“帧”。
第二个是面具。在面罩中，路径有白色填充 - 这就是图像显示的原因。

在这两种情况下，我都将视图框与图像相同的纵横比，以使图像占用SVG的整个空间。

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cp1">
      <path clip-rule="evenodd"
      d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
    </clipPath>
   </defs>
   <image width="100%" height="100%"
   href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
   clip-path="url(#cp1)"/>
</svg>

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
      fill="white"/>
    </mask>
   </defs>
   <image width="100%" height="100%"
   href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
   mask="url(#m1)"/>
</svg>

I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.

In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cp1">
      <path clip-rule="evenodd"
      d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
    </clipPath>
   </defs>
   <image width="100%" height="100%"
   href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
   clip-path="url(#cp1)"/>
</svg>

<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
      fill="white"/>
    </mask>
   </defs>
   <image width="100%" height="100%"
   href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
   mask="url(#m1)"/>
</svg>

回复收藏 0 原文

~没有更多了~