CODEWITHSUNDEEP
htmlcsssvgmaskclip-path
Itay Dressler
Itay Dressler

Reputation: 31

Using embedded SVG inside a clip-path of an SVG

Trying to create a mask for an image using SVG. The mask is created out of a rounded corners rect, and a tip at the upper right corner.

I'm creating the entire thing just in SVG, but the I can't properly clip the tip of the mask. It seems as if you can't use an embedded SVG inside the clip-path element? Is that true? Whats the proper way to implement this than?

The image gets clipped only by the rectangle.

Here is my code - 

<svg width="100%" height="210">
  <defs>
    <clipPath id="mask">
          <rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
          <svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)">
            <path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
          </svg>
    </clipPath>
  </defs>
  <image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
         x="0"
         y="0"
         width="100%"
         preserveAspectRatio="none"
         clip-path="url(#mask)"/>
</svg>

And a link to the codepen - http://codepen.io/itayd/pen/VpXLZW

Upvotes: 2

Views: 1387

Answers (1)

Itay Dressler
Itay Dressler

Reputation: 31

The solution was to define the path element in the defs, and use a element inside the clipPath. 

<svg width="100%" height="210">
  <defs>
      <path transform="translate(50%, 50%)" cx="100" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
      <path id="tip" fill="green" d="M37.5,24.4C37.5,11,48.5,0,62,0H0v34h37.5V24.4z"/>
    <clipPath id="mask">
          <rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
          <use xlink:href="#tip" x="calc(100% - 68px)"/>
    </clipPath>
  </defs>
  <image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
         x="0"
         y="0"
         width="100%"
         preserveAspectRatio="none"
         clip-path="url(#mask)"/>
</svg>

Upvotes: 1

Related Questions