Sanjith Sanjith - 1 year ago 76
CSS Question

SVG- path clipping using javascript

I am trying to clip the path using JavaScript. I have tried the below code.



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





This clips the path except the red color path. I want to clip the green color path rendered on red one. Is it possible to clip that?

Answer Source

Do you mean like this?

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

Update

The simplest solution is to construct your green path properly. You original green path consisted of two sub-paths:

  1. One started at left and went up over the top and down the right.
  2. The second started on the left and followed the top of the red curve over.

enter image description here

Sub-paths are filled separately, so you were actually getting two green shapes. Both of which overlapped the top of the red shape.

The solution is to reverse the second sub-path (so it goes from right to left). Then use it to complete the first green shape so it goes around the red shape, instead of across it.

enter image description here

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download