svg klip obrazu i pokaż obrys

Question

Cześć, jestem nowy na tej stronie, więc wybacz mi, jeśli nie wiem, co chcę zrobić

Moje pytanie to:-

Używam HTML5 i SVG do przycinania obrazu, tak aby wyświetlana była tylko część obrazu, która znajduje się wewnątrz kształtu przycinania/wielokąta, podczas gdy jakakolwiek część poza kształtem wielokąta jest niewidoczna/przycięta

Chciałbym również dodać szerokość i kolor obrysu do kształtu wielokąta

Kod SVG, którego używam:-

<?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>

Powyższy kod działa poprawnie, wyświetla obrazek w kształcie wielokąta, tylko część obrazu znajdująca się wewnątrz kształtu jest wyświetlana, podczas gdy każda część wychodząca poza kształt jest ukryta

Ale jakoś próbowałem różnych rzeczy, ale nadal nie jestem w stanie wyświetlić obrysu / granicy.

Moje pytanie brzmi, jak wyświetlić obramowanie/obrys na kształcie wielokąta, który służy do przycinania obrazu

Z góry dziękuję

image html svg clip

5

Aditya 17 październik 2012, 12:32

Answer 1

Najpierw proszę wpisać ID małymi literami, aby ścieżka klipu działała: <clipPath id="SVGID_1_">

Po drugie, po prostu zduplikuj swoją ścieżkę, aby użyć jej jako zwykłego kształtu.

<?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>

Alternatywnie możesz zdefiniować swoją ścieżkę jako kształt i po prostu odwołać się do jego nazwy później:

<?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>

Zapoznaj się z tym dokumentem.

4

Nippey 17 październik 2012, 13:10

Answer 2

Tutaj używasz obrazu z SVG, ale jeśli załóżmy, że używasz ścieżki obcinania na obrazie w kodzie HTML, nie będziesz mógł obramować go w ten sposób. Aby to osiągnąć, możesz zastosować ścieżkę przycinania również do kontenera div obrazu, a następnie nadać mu tło i obramowanie tego samego koloru.

0

Anurag Agarwal 29 kwiecień 2014, 05:25

svg klip obrazu i pokaż obrys

2 odpowiedzi

Podobne pytania

Nowe pytania

image