Question

我有一系列相互重叠的不透明svg路径。我想基于每个形状的先前同级对象创建一个遮罩，以遮盖重叠。

我的问题是，在我必须定型（下图）的情况下，基于形状0的蒙版会完全去除形状1

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

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

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

0 个答案: