0

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

Neekoy
  • 2,325
  • 5
  • 29
  • 48
  • 1
    and what is the intended result? – Temani Afif Nov 17 '18 at 14:46
  • @TemaniAfif To have the border of the div follow the pattern of the SVG. Basically one part is one colour, the other one is another colour, and its separated by the SVG pattern. – Neekoy Nov 17 '18 at 19:34
  • like this ? https://stackoverflow.com/questions/49669689/good-way-to-create-a-curve-between-two-gradient-divs-in-css/49670229#49670229 – Temani Afif Nov 17 '18 at 19:38
  • @TemaniAfif Yep - exactly :) – Neekoy Nov 18 '18 at 01:36
  • Ah, now I got it. Clip-path needs a return point, so it's automatically adding a Z, and that's why it's funky. Pretty sure if I define it properly it'll work. – Neekoy Nov 18 '18 at 01:48
  • Yeah, exactly as I thought - I'll add an answer with how it works. – Neekoy Nov 18 '18 at 01:54

1 Answers1

1

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)

Neekoy
  • 2,325
  • 5
  • 29
  • 48