时间戳

首页 > 解决方案 > SVG 蒙版，使用一个形状的坐标来部分标记另一个形状

svg - SVG 蒙版，使用一个形状的坐标来部分标记另一个形状

问题描述

我有一系列相互重叠的不透明 svg 路径。我想根据每个形状的前一个兄弟创建一个遮罩来遮盖重叠。

我的问题是，在我必须根据形状 0 塑造形状（在下面摆弄）的情况下，完全移除形状 1

我对 SVG 有点陌生，但据我了解，蒙版在应用时会在其坐标中“打一个洞”。我希望遮罩能够移除形状 1 中与形状 0 共享坐标的任何东西，而不是完全隐藏它。我究竟做错了什么？

https://jsfiddle.net/nazhgvL6/3/

<svg pointer-events="none" width="1558" height="1163" viewBox="-130 -97 1558 1163" style="transform: translate3d(-330px, -497px, 0px) scale(1);">

  <defs>
  <!-- #mask-shape-1 d attribute is the same as the d attribute of the shape 0 path-->
    <mask id="mask-shape-1"> <!-- rename ID to turn mask on/off -->
      <path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" fill="white"></path>
      <path d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" rx="5" fill="black"></path>"
    </mask>

  </defs>

  <g>
  <!-- shape 0 -->
    <path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M779 780L779 767L775 741L771 728L760 704L746 682L737 672L717 655L682 636L656 629L630 627L604 636L582 648L563 664L555 673L543 692L529 709L515 737L510 758L508 779L516 799L526 817L539 831L562 847L571 862L592 881L601 887L619 895L630 898L650 897L670 891L689 883L707 871L714 864L733 852L742 844L757 826L764 816L775 792z" mask="url(#mask-shape-0)"></path>

  <!-- shape 1 -->
    <path class="arrival-lines-polygon-fill leaflet-interactive" stroke="none" fill="red" fill-opacity="0.2" d="M562 849L522 810L495 770L485 749L482 738L483 715L489 693L498 671L504 661L541 613L573 588L599 576L614 572L643 575L657 578L684 588L697 595L709 603L731 622L749 644L756 656L768 683L772 696L777 731L779 760z" mask="url(#mask-shape-1)"></path>
  </g>
</svg>

标签： svgpathmask

解决方案

推荐阅读