How to crop a particular area of image with SVG clipping mask

Question

I am doing a clipping mask through SVG clip path. I am using one SVG element with three clipping masking.

Problem is my svg is getting full window width and height, therefore images are also getting full width and height.

So what I want is to move the image inside the clipping path so that I can show the actual area of the image

Here is the Jsfiddle link.

I don't want to change the image's aspect ratio.. please let me know if there is any way for this .

Thanks

Answer 1

If you don't want your images to stretch and break their aspect ratio, then don't use preserveAspectRatio="none". You'll probably want to use one of the "xxx slice" variants. Below I have used different ones for each image in order to have them align to the left, centre and right repectively.

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
    </svg>

Update

[I am] still unable to get the exact view for the first image. I want to show the girl's face. but its not happening

One solution would be to change your images so that the area of interest is in the desired part of the image.

Otherwise you need to start working with viewBoxes. However, once a viewBox gets involved though, you can no longer stretch the parent SVG to fill the page width and height as per the original example. You'll have to be satisfied with a fixed aspect ratio for the image as a whole.

Here's one way to solve your problem:

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2 1">
  <defs>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.3,0 1,0 0.7,1 0,1"/>
    </clipPath>
  </defs>

  <image class="leftImage" preserveAspectRatio="xMaxYMid slice" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>

  <image class="rightImage" preserveAspectRatio="xMidYMid slice" x="1" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>

  <image class="topImage" preserveAspectRatio="xMidYMid slice" x="0.5" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"
         clip-path="url(#mid)"/>

</svg>

Answer 2

You might want to change the x (and maybe the y, too) for your images and apply the opposite translation to their corresponding clipping paths.

<!-- language: lang-html -->

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none"
         xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox" transform="translate(-200,0)">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox" transform="translate(450,0)">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/>
</svg>

However, if you are not fixing the minimum and maxumum width and height of the svg or its container, you might show blank parts of the image outside its boundaries. You can set min-height, max-height, min-width, or max-widthon the css for the svg or its container.

Also, since showing the interesting area rather depends on the device/browser width, an extra enhancement would be to automatically compute the exact translations to center the region of interest with a script, depending on the user's width.