CODEWITHSUNDEEP
imagehtmlsvgclip
Aditya
Aditya

Reputation: 405

svg clip image and show stroke

Hi I am new on this site so please forgive me if i am not clear about what i am trying to do

My Question is:-

I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped

Also I wish to add stroke width and color to the polygon shape

The SVG code that i am using:-

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
    <g>
        <clipPath ID="SVGID_1_">
            <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
                c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
                c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
                S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
                c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
                c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
                c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
        </clipPath>
    </g>
</g>
<a xlink:href="#">  
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;"  xlink:href="img.jpg" />
</a>
</svg>

The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden

But somehow I tried various things but still i am not able to display stroke/border.

My question is how to display the border/stroke on a polygon shape that is used to clip an image

Thanks in advance

Upvotes: 5

Views: 3988

Answers (2)

Anurag Agarwal
Anurag Agarwal

Reputation: 303

Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way. To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.

Upvotes: 0

Nippey
Nippey

Reputation: 4739

At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">

Second, just duplicate your path in order to use is as regular shape.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
    <g>
        <clipPath id="SVGID_1_">
            <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
                c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
                c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
                S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
                c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
                c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
                c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
        </clipPath>
        <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
            c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
            c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
            S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
            c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
            c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
            c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
    </g>
</g>
<a xlink:href="#">  
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;"  xlink:href="img.jpg" />
</a>
</svg>

Alternatively, you can define you path as a shape and just refer to its name afterwards:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
    <path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
        c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
        c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
        S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
        c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
        c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
        c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
    <g>
        <clipPath id="SVGID_1_">
            <use xlink:href="#myPath" x="0" y="0"/>
        </clipPath>
        <use xlink:href="#myPath" x="0" y="0"/>
    </g>
</g>
<a xlink:href="#">  
    <image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;"  xlink:href="img.jpg" />
</a>
</svg>

Check out this doc.

Upvotes: 4

Related Questions