使用javascript进行SVG-路径剪辑

Question

我正在尝试使用JavaScript剪辑路径。我试过以下代码。

   <svg width="900" height="600">
        <clipPath id="clip">
            <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" />
        </clipPath>
        <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" />
        <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 M 0 293.8666666666667  C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667" stroke="red" fill="green" opacity="0.7"/>
    </svg>

这会剪切红色路径以外的路径。我想要剪切红色渲染的绿色路径。是否可以剪辑？

Answer 1

你的意思是这样吗？

＆＃13;

＆＃13;

<svg width="900" height="600">
        <clipPath id="clip">
            <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" />
        </clipPath>
        <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" />
        <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 M 0 293.8666666666667  C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667" stroke="red" fill="green" opacity="0.7"
              clip-path="url(#clip)"/>
    </svg>

＆＃13;

＆＃13;

＆＃13;

<强>更新

最简单的解决方案是正确构建绿色路径。您原来的绿色路径包含两个子路径：

1. 一个人从左边开始，然后从右上方上升。
2. 第二个从左边开始，然后沿着红色曲线的顶部。



子路径分别填充，因此您实际上获得了两个绿色形状。两者都重叠在红色形状的顶部。

解决方案是反转第二个子路径（因此它从右向左）。  然后使用它来完成第一个绿色形状，使其围绕红色形状，而不是穿过它。



＆＃13;
＆＃13;
  <svg width="900" height="600">
        <path d="M 0 464 L 0 293.8666666666667 C 92.6666666666456 251.59111111111108 185.3333333332912 209.31555555555556 278 201.06666666666666 C 370.6666666666456 192.8177777777778 463.33333333329125 218.59555555555556 556 247.46666666666673 C 648.6666666666456 276.33777777777783 741.3333333332912 308.3022222222222 834 340.2666666666667 L 834 464" fill="red" opacity="0.8" />
        <path d="M 0 293 L 0 139.19999999999996 C 92.6666666666456 107.06370370370374 185.3333333332912 74.92740740740744 278 69.60000000000001 C 370.6666666666456 64.27259259259263 463.33333333329125 85.75407407407415 556 108.2666666666667 C 648.6666666666456 130.77925925925928 741.3333333332912 154.322962962963 834 177.86666666666665 L 834 340.2666666666667 C 741 308 648 276 556 247 C 463 218 370 192 278 201 C 185 209 92 251 0 293 Z" stroke="red" fill="green" opacity="0.7"/>
    </svg>
＆＃13;
＆＃13;
＆＃13;