CODEWITHSUNDEEP
csssvgclip-path
edrpls
edrpls

Reputation: 317

Is it possible to make a SVG clipPath with a <path> responsive?

I am trying to make a responsive SVG with a bitmap pattern and a sort of complex shape with clipPath.

If I use a <polygon> instead of a <path> to create simpler shapes they are responsive, but I haven't achieved the same using a path, any ideas on how to achieve this or even if is possible?

Here's the code I have and a working demo.

<!-- Path Test-->
<div class="mainContainer">
  <div class="assetContainer">
    <div class="asset">
      <svg width="0" height="0">
        <defs>
          <clipPath id="pathTest">
            <path d="M 0.1562378,0.5 H 323.76366 c 0,0 -20.4244,6.3661 -21.48541,47.4801 -1.06101,41.1141 19.8939,42.7056 21.22016,43.2361 1.32626,0.5305 -323.3421722,0 -323.3421722,0 0,0 19.6286472,-1.8568 19.8938992,-42.9708 C 20.315389,7.1313 0.1562378,0.5 0.1562378,0.5 Z"
            />
          </clipPath>

          <pattern x="0" y="0" width="84" height="70" id="img7" patternUnits="userSpaceOnUse">
            <image xlink:href="http://i.imgur.com/T66UMJs.png" width="84" height="70" x="0" y="0" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#img7)" clip-path="url(#pathTest)" />
      </svg>
    </div>
  </div>
</div>


/* CSS */

svg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.assetContainer {
  overflow: visible;
  height: 100px;
  position: relative;
  width: 100%;
}

.asset {
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 0px;
  left: 0px;
  cursor: pointer;
  z-index: auto;
  left: 0px;
}

.container {
  width: 400px;
  height: 400px;
  background: gray;
  position: relative;
  margin-bottom: 20px;
}

.mainContainer {
  background: rebeccapurple;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  position: absolute;
  //overflow: hidden;
}

Upvotes: 4

Views: 4370

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Convert your <clipPath> to use clipPathUnits="objectBoundingBox". When using objectBoundingBox units, your clip path coords map to the bounding box of the element they are being applied to. (0,0) maps to the top left of the element. (1,1) maps to the bottom right.

You'll need to redefine your path (or apply a transform to convert the coords to this range). But once you do, it will automatically scale to fit whatever you apply it to.

Upvotes: 1

Related Questions