CODEWITHSUNDEEP
htmlsvg
Neekoy
Neekoy

Reputation: 2533

SVG clipPath on a div border

I'm trying to get a div's border to follow the pattern of an SVG going through the following answer on SO:

Clip div with SVG path

I have the following HTML:

<div class="container">
  <svg height="850px" width="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <clipPath id="svgPath" >
          <path style="stroke: none; fill: red" id="arrow" d="M 50 0 C 10 150 80 130 50 170 C 10 260 80 220 50 310 C 10 420 80 380 50 510 C 50 520 80 500 50 600 C 10 700 80 680 50 720 C 10 800 80 780 50 830 " />
          </clipPath> 
        </defs>
        <rect width="100%" height="100%" fill="green" clip-path="url(#svgPath)" />
      </svg>
</div>

It gives me a pretty different result though. The following is a Plunker of the code:

https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview

Thanks :)

Upvotes: 0

Views: 85

Answers (1)

Neekoy
Neekoy

Reputation: 2533

I figured it out. Initially as in the Plunker above, it was turning the swiggly line into a strange figure in the following way:

enter image description here

The above is this Plunker: https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview

However, it's basically adding a Z at the end of the SVG, so it's reconnecting to the beginning. Then I figured out it needs to actually have points that would define a rectangle, with one of the sides being the swiggly line. So I added two additional points on the top-left and bottom-left at the beginning and end of the SVG.

Plunker with the working example:

https://next.plnkr.co/edit/CjNqIDcEFcri4S7K?open=lib%2Fscript.js

(It's not fancy but works to visualise if someone stumbles upon this)

Upvotes: 1

Related Questions