CODEWITHSUNDEEP
csssvgclip-path
Andrew McKendrick
Andrew McKendrick

Reputation: 51

SVG needs to clip DIV using clipPath

I am confused about getting clipPath to work on an SVG. I want the SVG to clip the background of a DIV (which is a solid color). I can get it to work with another SVG, but not mine (for whatever reason). The SVG can be displayed, and I can get it positioned over the DIV, but when I want to use clipPath, I apparently need to use a transform, and that's what I don't understand. I just want the SVG to match the width of the DIV so as the screen size changes, so does the DIV and therefore the SVG width.

The SVG is as follows:

          <svg
            viewBox="0 0 274.31683 238.70908"
            xmlns="http://www.w3.org/2000/svg"
          >
            <clipPath id="test" clipPathUnits="objectBoundingBox"> 
              <path fill="orange" d="m 0,126.58605 c 43.483333,34.89786 86.027803,71.03377 130.14535,105.10005 14.27716,9.38696 33.58582,8.91714 47.53899,-0.92765 31.92117,-20.80793 64.22335,-41.05865 96.36792,-61.54204 0,-46.11038 0,-92.220769 0,-138.331153 -13.58526,7.498326 -25.16797,20.372227 -41.11765,22.436068 -13.75664,1.65809 -22.43347,-10.054193 -32.24457,-17.4598 C 186.33624,23.932352 171.98244,12.00318 157.62864,0.07400691 105.08576,0.04933794 52.54288,0.02466897 0,0 0,42.19535 0,84.3907 0,126.58605 Z"></path>
            </clipPath>
          </svg>

And the HTML is:

      <div
        style={{
          width: '100%',
          backgroundColor: 'pink',
          border: '1px solid blue',
          height: '1000px',
          clipPath: 'url(#test)',
        }}
      />

Upvotes: 2

Views: 49

Answers (1)

iorgu
iorgu

Reputation: 3043

Instead of clipPathUnits="objectBoundingBox", use clipPathUnits="userSpaceOnUse", like so:

<svg viewBox="0 0 274.31683 238.70908" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="test" clipPathUnits="userSpaceOnUse">
      <path fill="orange" d="m 0,126.58605 c 43.483333,34.89786 86.027803,71.03377 130.14535,105.10005 14.27716,9.38696 33.58582,8.91714 47.53899,-0.92765 31.92117,-20.80793 64.22335,-41.05865 96.36792,-61.54204 0,-46.11038 0,-92.220769 0,-138.331153 -13.58526,7.498326 -25.16797,20.372227 -41.11765,22.436068 -13.75664,1.65809 -22.43347,-10.054193 -32.24457,-17.4598 C 186.33624,23.932352 171.98244,12.00318 157.62864,0.07400691 105.08576,0.04933794 52.54288,0.02466897 0,0 0,42.19535 0,84.3907 0,126.58605 Z"></path>
    </clipPath>
  </defs>
</svg>

<div style="width: 100%; background-color: pink; border: 1px solid blue; height: 1000px; clip-path: url('#test');"></div>

...or what enxaneta suggests (adding transform="scale(0.0036)"):

<svg viewBox="0 0 274.31683 238.70908" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="test" clipPathUnits="objectBoundingBox"> 
      <path fill="orange" transform="scale(0.0036)" d="m 0,126.58605 c 43.483333,34.89786 86.027803,71.03377 130.14535,105.10005 14.27716,9.38696 33.58582,8.91714 47.53899,-0.92765 31.92117,-20.80793 64.22335,-41.05865 96.36792,-61.54204 0,-46.11038 0,-92.220769 0,-138.331153 -13.58526,7.498326 -25.16797,20.372227 -41.11765,22.436068 -13.75664,1.65809 -22.43347,-10.054193 -32.24457,-17.4598 C 186.33624,23.932352 171.98244,12.00318 157.62864,0.07400691 105.08576,0.04933794 52.54288,0.02466897 0,0 0,42.19535 0,84.3907 0,126.58605 Z"></path>
    </clipPath>
  </defs>
</svg>

<div style="width: 100%; background-color: pink; border: 1px solid blue; height: 1000px; clip-path: url('#test');"></div>

Further reading:

userSpaceOnUse

This value indicates that all coordinates inside the element refer to the user coordinate system as defined when the clipping path was created.

objectBoundingBox

This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

Soruce: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits

Upvotes: 0

Related Questions