主页 / 问题 / 1604913
Accepted
Alexandr_TT
Asked:2025-01-16 14:55:44 +0800 CST2025-01-16 14:55:44 +0800 CST

当经过另一个物体后面的一段路径时，如何掩盖一个物体？

  • 772

当角色（在本例中为雪人）循环移动时，他应该消失在经过树后面的轨道部分上。

在此处输入图片描述

使用动画命令：animateMotion，实现雪人沿给定路径的运动path id="trace"

点击后开始移动

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
                  <!-- Фон -->
<image xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050"/>
                  <!-- Трасса движения -->
<path id="trace" style="fill:none;stroke:#e20000;stroke-width:2" d="M1297.7 862.8c-58.4-49.6-136 24.8-251.6-4.7-18.5-4.7-56.8-38.5-88.1-52a394.6 394.6 0 0 0-77.1-22c-20.7-4.2-42.1-11.4-63-7.8-24.2 4.2-45.2 19.9-66 33-18 11.4-30.2 32.3-50.3 39.4-38.1 13.3-102.2-34.1-121.2 1.5-7.6 14.4 10.5 39.8 26.8 41 258 18 411.5 14.2 649.6 0 16.6-1 53.6-17.7 41-28.4z"/> 
                   <!-- Снеговик        -->
  <image  id="Snowman" x="-100" y="-340" transform="scale(0.4)" xlink:href="https://isstatic.askoverflow.dev/mbefD.png"   opacity="1">
    </image>
    <animateMotion xlink:href="#Snowman"
    begin="svg1.click" 
    dur="10s" 
    calcMode="linear"
    repeatDur="indefinite" >
      <mpath xlink:href="#trace"/>
    </animateMotion>
</svg>

当经过圣诞树后面的一段路线时，如何伪装雪人？

可以为标签列表中的任何标签给出答案，但优先考虑 CSS、SVG 标签的答案。

更新 17.01.2025

已经有一个很好的答案，但从评论来看，还有很多关于如何以其他方式解决这个问题的想法。朋友们，发表你的答案，将言语付诸行动吧！

  • 比赛的获胜者将是最完全满足比赛条件的答案。

  • 答案的优美性和独创性。这当然是主观的，但谁付钱谁说了算。

  • 最多赞同

恭喜 De.Minov 比赛的获胜者！

javascript

3 个回答

  1. Best Answer

    我想到的唯一实现方法是使用面具。

    您需要根据静态对象的形状创建一个蒙版：

    在此处输入图片描述 我刚刚勾画出了路线。理想情况下，让它更漂亮:)

    我们对正在移动的物体应用蒙版。
    但是可能会遇到这样的问题：当一个运动物体从静态物体“前面”经过时，遮罩会遮挡住运动物体。

    这是我遇到的问题：

    在此处输入图片描述

    body { height: 100vh; overflow: hidden; margin: 0; background-image: linear-gradient(to top, #446085, #06060e 30%); }
svg { display: block; width: 100%; height: 100%; }
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="1680" height="1050" viewBox="0 0 1680 1050">
  <defs>
    <mask id="maskBehindTree" maskUnits="userSpaceOnUse">
      <!-- Всё видимое поле, белое -->
      <rect x="0" y="0" width="1680" height="1050" fill="#fff" />
      <!-- Фигура, где хотим "прятать" снеговика (там чёрный) -->
      <path
        d="M831 856C836 848 837 840 828 833 791 834 733 805 723 792 709 767 716 737 717 713 719 662 725.6667 633.6667 730 594 741 505 958 507 971 594 975 650 984 752 967 780 953 812 897 844 870 829 864 834 862 845 870 856 861 858 840 859 831 856z" 
        fill="#000"
      />
    </mask>
  </defs>

  <!-- Фон -->
  <image
    href="https://i.imgur.com/DUQ7JM8.png"
    width="1680"
    height="1050"
  />
  <!-- Трасса движения -->
  <path
    id="trace"
    fill="none"
    stroke="#e20000"
    stroke-width="2"
    d="M1297.7 862.8c-58.4-49.6-136 24.8-251.6-4.7-18.5-4.7-56.8-38.5-88.1-52a394.6 394.6 0 0 0-77.1-22c-20.7-4.2-42.1-11.4-63-7.8-24.2 4.2-45.2 19.9-66 33-18 11.4-30.2 32.3-50.3 39.4-38.1 13.3-102.2-34.1-121.2 1.5-7.6 14.4 10.5 39.8 26.8 41 258 18 411.5 14.2 649.6 0 16.6-1 53.6-17.7 41-28.4z"
  />
  <g id="SnowmanGroup" mask="url(#maskBehindTree)">
    <!-- Снеговик -->
    <image
      id="Snowman"
      x="-100"
      y="-340"
      transform="scale(.4)"
      href="https://i.imgur.com/adbDcz8.png"
      opacity="1"
    />
    <!-- Анимация движения снеговика -->
    <animateMotion
      href="#Snowman"
      begin="svg1.click" 
      dur="10s" 
      calcMode="linear"
      repeatDur="indefinite"
    >
      <mpath href="#trace" />
    </animateMotion>
  </g>
</svg>

    解决方案立即出现了，SVG 允许您管理属性。
    可以创建一个“打开/关闭”属性值的动画。

    也就是说，您可以制作一个动画，通过keyTimes属性，我们可以定义何时显示蒙版以及何时不显示蒙版。

    题中，运动从右侧开始，向左侧移动，此时运动物体位于静止物体的后面。那些。从 0 到 .5 的进度 - 显示蒙版，从 .5 到 1，当移动物体位于静态物体前面时 - 将其关闭。

    为此，我们创建了以下动画：

    <animate
  href="#SnowmanGroup"  // обращаемся к группе со снеговиком
  attributeName="mask"  // менять будет атрибут mask
  begin="svg1.click"    // начало анимации как у основной анимации
  dur="10s"             // длина анимации тоже
  repeatCount="indefinite"
  fill="freeze"
  values="url(#maskBehindTree);url(#maskBehindTree);none;none"
  keyTimes="0;.49;.5;1" // в `values` указываем значение для маски
                        // и `none` - что означает отключение маски 
                        // в `keyTimes` указываем прогресс, описанный выше
                        // т.е. от 0 до <.5 будет `mask="url(#maskBehindTree)"`
                        // а от .5 до 1 будет `mask="none"`
/>


    body { height: 100vh; overflow: hidden; margin: 0; background-image: linear-gradient(to top, #446085, #06060e 30%); }
svg { display: block; width: 100%; height: 100%; }
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="1680" height="1050" viewBox="0 0 1680 1050">
  <defs>
    <mask id="maskBehindTree" maskUnits="userSpaceOnUse">
      <!-- Всё видимое поле, белое -->
      <rect x="0" y="0" width="1680" height="1050" fill="#fff" />
      <!-- Фигура, где хотим "прятать" снеговика (там чёрный) -->
      <path
        d="M831 856C836 848 837 840 828 833 791 834 733 805 723 792 709 767 716 737 717 713 719 662 725.6667 633.6667 730 594 741 505 958 507 971 594 975 650 984 752 967 780 953 812 897 844 870 829 864 834 862 845 870 856 861 858 840 859 831 856z" 
        fill="#000"
      />
    </mask>
  </defs>

  <!-- Фон -->
  <image
    href="https://i.imgur.com/DUQ7JM8.png"
    width="1680"
    height="1050"
  />
  <!-- Трасса движения -->
  <path
    id="trace"
    fill="none"
    stroke="#e20000"
    stroke-width="2"
    d="M1297.7 862.8c-58.4-49.6-136 24.8-251.6-4.7-18.5-4.7-56.8-38.5-88.1-52a394.6 394.6 0 0 0-77.1-22c-20.7-4.2-42.1-11.4-63-7.8-24.2 4.2-45.2 19.9-66 33-18 11.4-30.2 32.3-50.3 39.4-38.1 13.3-102.2-34.1-121.2 1.5-7.6 14.4 10.5 39.8 26.8 41 258 18 411.5 14.2 649.6 0 16.6-1 53.6-17.7 41-28.4z"
  />
  <g id="SnowmanGroup" mask="url(#maskBehindTree)">
    <!-- Снеговик -->
    <image
      id="Snowman"
      x="-100"
      y="-340"
      transform="scale(.4)"
      href="https://i.imgur.com/adbDcz8.png"
      opacity="1"
    />
    <!-- Анимация движения снеговика -->
    <animateMotion
      href="#Snowman"
      begin="svg1.click" 
      dur="10s" 
      calcMode="linear"
      repeatDur="indefinite"
    >
      <mpath href="#trace" />
    </animateMotion>
    <!-- Анимация включения/отключения маски -->
    <animate
      href="#SnowmanGroup"
      attributeName="mask"
      begin="svg1.click"
      dur="10s"
      repeatCount="indefinite"
      fill="freeze"
      values="url(#maskBehindTree);url(#maskBehindTree);none;none"
      keyTimes="0;.49;.5;1"
    />
  </g>
</svg>

    事实上，就是这样。

    值得注意的是，这不是一个通用的解决方案。
    在该问题的背景下，该解决方案相对简单，但在其他情况下，要么会有更多的代码，要么该选项根本不合适。

    • 7

  2. 红色圆圈、绿色正方形、红色圆圈。一个红色圆圈画在正方形下方，另一个红色圆圈画在正方形上方。圆圈同步移动，其透明度呈动画形式，因此两个圆圈的总和始终是不透明的。出现了这样的错觉：一个圆圈在正方形下方飞过，然后又在正方形上方飞过：

    <svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle r="10" fill="red">
    <animateMotion
      dur="5s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    <animate
      attributeName="opacity"
      values="1;0;0;0;1;1;1;1;1"
      dur="5s"
      repeatCount="indefinite" />
  </circle>

  <rect x="85" y="35" width="30" height="30" fill="green" />
  <rect x="80" y="30" width="40" height="40" fill="green" opacity="50%" />

  <circle r="10" fill="red">
    <animateMotion
      dur="5s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    <animate
      attributeName="opacity"
      values="1;1;1;1;1;0;0;0;0"
      dur="5s"
      repeatCount="indefinite" />
  </circle>
</svg>

    附注：我的解决方案不适合这个问题。在问题中，树和背景是一张图。我的解决方案要求树成为一个单独的对象。无论如何，它需要以某种方式与背景分离。此部分可以作为面具，或者可以从背景中剪掉树。劳动强度没什么不同：戴上口罩，我们几乎就可以砍树了。但通过处理树本身的轮廓和半透明度，可以更好地实现剪切树的质量。

    • 5

  3. 这是一个使用一组过滤器“动态”铆接面具的软件示例найти грани，我在评论中谈到了这一点。

    更新于 2025.01.23 / 4:05

    首先，根据圣诞树剪出一个面具

    #treeMask {
  filter: blur(3px) brightness(1.5) contrast(20)
  blur(5px) brightness(4) contrast(20)
  blur(7px) contrast(25)
  blur(10px) contrast(25)
  blur(25px) contrast(50);
}
svg:hover #treeMask{
filter: blur(3px) brightness(1.5) contrast(20)
  blur(5px) brightness(4) contrast(20)
  blur(7px) contrast(25)
  blur(10px) contrast(25)
  blur(25px) contrast(50)
  invert(100%);
}
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
<mask id='mm'>
  <image id='treeMask' xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050"/>
  <rect x='0' y='825' width='1680' height='225' fill='white' opacity='.5'></rect>
</mask>
<image id='tree' xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050" mask='url(#mm)'/>
</svg>

    之后我们使用的方式与@De.Minov

    唯一的区别就是面具，没有别的

    #treeMask {
  filter: blur(3px) brightness(1.5) contrast(20)
  blur(5px) brightness(4) contrast(20)
  blur(7px) contrast(25)
  blur(10px) contrast(25)
  blur(25px) contrast(50)
  invert(100%);
}

#trace {
  fill: none;
  stroke: #e20000;
  stroke-width: 2
}
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">

<mask id='mm'>
  <image id='treeMask' xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050"/>
  <rect x='0' y='825' width='1680' height='225' fill='white'></rect>
</mask>

<image id='bg' xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050"/>

<path id="trace" d="M1297.7 862.8c-58.4-49.6-136 24.8-251.6-4.7-18.5-4.7-56.8-38.5-88.1-52a394.6 394.6 0 0 0-77.1-22c-20.7-4.2-42.1-11.4-63-7.8-24.2 4.2-45.2 19.9-66 33-18 11.4-30.2 32.3-50.3 39.4-38.1 13.3-102.2-34.1-121.2 1.5-7.6 14.4 10.5 39.8 26.8 41 258 18 411.5 14.2 649.6 0 16.6-1 53.6-17.7 41-28.4z"/> 

 <g id="SnowmanGroup" mask="url(#mm)">
    <!-- Снеговик -->
    <image
      id="Snowman"
      x="-100"
      y="-340"
      transform="scale(.59)"
      href="https://isstatic.askoverflow.dev/mbefD.png"
      opacity="1"
    />
    <!-- Анимация движения снеговика -->
    <animateMotion
      href="#Snowman"
      begin="svg1.click" 
      dur="10s" 
      calcMode="linear"
      repeatDur="indefinite"
    >
      <mpath href="#trace" />
    </animateMotion>
    <!-- Анимация включения/отключения маски -->
    <animate
      href="#SnowmanGroup"
      attributeName="mask"
      begin="svg1.click"
      dur="10s"
      repeatCount="indefinite"
      fill="freeze"
      values="url(#mm);url(#mm);none;none"
      keyTimes="0;.49;.7;1"
    />
  </g>
</svg>

    附言：树变得稍微透明了。可能是因为面具的颜色并不完全是黑白的，但我认为这样更有趣

    当然，另一个缺点是，图像的某些部分没有被清晰地切断（例如，在树的左下方，“尾巴”悬在雪人上方）。

    但如果在使用过滤器（例如帆布）处理之前先将雪切开，大部分尾巴当然不会留下

    • 2

相关问题