0

I'm having trouble resizing my clip path. My goal is to have a div with a gradient get clipped by the path, and have the whole thing sit in the top right corner of the page and be responsive.

.bg-gradient {
  background: linear-gradient(238.72deg, #9086FF 0%, #000000 100%), linear-gradient(301.28deg, #FF0000 0%, #20002C 100%), linear-gradient(121.28deg, #207A00 0%, #950000 100%), linear-gradient(238.72deg, #00D1FF 0%, #000000 100%), linear-gradient(238.72deg, #00D1FF 0%, #A80000 100%), linear-gradient(58.72deg, #B80000 0%, #1B00C2 100%), linear-gradient(125.95deg, #00E0FF 10.95%, #87009D 100%), linear-gradient(263.7deg, #B60000 3.43%, #B100A0 96.57%), linear-gradient(320.54deg, #800000 0%, #00C2FF 72.37%), linear-gradient(130.22deg, #B9C900 18.02%, #8F73FF 100%);
  background-blend-mode: color-dodge, difference, color-dodge, difference, lighten, difference, color-dodge, difference, difference, normal;

  width: 600px;
  height: 400px;
  position: absolute;
  right: 0;
  top: 0;

  -webkit-clip-path: url(#clippath);
  clip-path: url(#clippath);
}
<html>

<body>

<?xml version="1.0" encoding="utf-8"?>
    <svg class='svg-clippath' viewBox="0 0 617.7 261.8" style="enable-background:new 0 0 617.7 261.8;" xml:space="preserve">


      <defs>
        <clipPath id='clippath'>
          <path class="st1" d="M552.9,244.1l-58.3-100.9c-36.7-63.6-128.5-63.6-       165.3,0l0,0l0,0l0,0l0,0l0,0l-22.8,39.5l22.8-39.5l0,0
    l-41,70.9c-36.7,63.6-128.5,63.6-165.3,0L-0.5,0h329.8H412l0,0h206.2l0,0v226.6C618.2,262.4,570.8,275.1,552.9,244.1z" />
        </clipPath>
      </defs>
      <div class='bg-gradient'></div>
    </svg>
    
</body>
</html>
user2444211
  • 13
  • 2

1 Answers1

1

I found several issues with the code:

  • The <?xml version="1.0" encoding="utf-8"?> line is used in stand-alone files, but you do not need to include it in the script, and you should not include it at that place (see this question).

  • A div does not belong in svg code. You can add external elements to an svg with foreignObject.

  • The path for clipping is not correct, there are spaces between some minus signs and their numbers.

By fixing these, it seems to work, but you need to correct the units to whatever you want to do. Your bg-gradient has width and height in pixels, but at the same time your svg declaration has a viewBox, and therefore the final size depends on the interplay between both.

.bg-gradient {
  background: linear-gradient(238.72deg, #9086FF 0%, #000000 100%), linear-gradient(301.28deg, #FF0000 0%, #20002C 100%), linear-gradient(121.28deg, #207A00 0%, #950000 100%), linear-gradient(238.72deg, #00D1FF 0%, #000000 100%), linear-gradient(238.72deg, #00D1FF 0%, #A80000 100%), linear-gradient(58.72deg, #B80000 0%, #1B00C2 100%), linear-gradient(125.95deg, #00E0FF 10.95%, #87009D 100%), linear-gradient(263.7deg, #B60000 3.43%, #B100A0 96.57%), linear-gradient(320.54deg, #800000 0%, #00C2FF 72.37%), linear-gradient(130.22deg, #B9C900 18.02%, #8F73FF 100%);
  background-blend-mode: color-dodge, difference, color-dodge, difference, lighten, difference, color-dodge, difference, difference, normal;

  width: 600px;
  height: 400px;
  position: absolute;
  right: 0;
  top: 0;

  -webkit-clip-path: url(#clippath);
  clip-path: url(#clippath);
}
<html>

<body>

    <svg class='svg-clippath' viewBox="0 0 617.7 261.8" style="enable-background:new 0 0 617.7 261.8;" xml:space="preserve">


      <defs>
        <clipPath id='clippath'>
          <path class="st1" d="M552.9,244.1l-58.3-100.9c-36.7-63.6-128.5-63.6-165.3,0l0,0l0,0l0,0l0,0l0,0l-22.8,39.5l22.8-39.5l0,0
    l-41,70.9c-36.7,63.6-128.5,63.6-165.3,0L-0.5,0h329.8H412l0,0h206.2l0,0v226.6C618.2,262.4,570.8,275.1,552.9,244.1z" />
        </clipPath>
      </defs>
      <foreignObject clip-path="url(#clippath)" width="100%" height="100%">
  <div class='bg-gradient'></div>
  </foreignObject>
    </svg>
    
</body>
</html>
vqf
  • 2,600
  • 10
  • 16