htmlcsssvgclip-path

clip-path width doesn't 100% width


enter image description here

Hello, I'm using slick slider and I want to clip-path the container but the clip-path doesn't work well..

this is my svg path

<svg width="0" height="0">
    <defs>
        <clipPath id="mask1">
            <path id="curve" d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
            </path>
        </clipPath>
    </defs>
</svg>

the slider works but the clip-path doesn't fit the 100% window..

Thanks.. and sorry for my English..


Solution

  • You should convert your clipPath to one using bounding box units:

    <clipPath clipPathUnits="objectBoundingBox" ... >
    

    When you use bounding box units, all your clip path coordinates should be defined in the range 0..1.

    http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

    If you do this, the clipping path will be given the same size as the the element you apply it to.

    img {
      width: 100%;
      clip-path: url(#mask1);
      -webkit-clip-path: url(#mask1);
    }
    <svg width="0" height="0">
        <defs>
            <clipPath id="mask1" clipPathUnits="objectBoundingBox">
                <path id="curve"
                      transform="scale(0.00135, 0.00254)"
                      d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
                </path>
            </clipPath>
        </defs>
    </svg>
    
    
    <img src="//placecats.com/400/150"/>

    What I have done in the example above is to use a transform to scale the clip path to size 1x1. It's easier than recreating the shape with new coordinates.