svg và chương trình đột quỵ

Question

Hi Tôi mới trên trang web này vì vậy hãy tha thứ cho tôi nếu tôi không rõ ràng về những gì tôi đang cố gắng để làm

Câu hỏi của tôi là: -

Tôi đang sử dụng HTML5 và SVG để cắt hình ảnh sao cho chỉ một phần của hình ảnh bên trong hình cắt/đa giác được hiển thị trong khi bất kỳ phần nào bên ngoài hình đa giác là vô hình/cắt bớt

Ngoài ra tôi muốn thêm chiều rộng và màu sắc nét hình đa giác

Mã SVG mà tôi đang sử dụng: -

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

Mã đề cập ở trên hoạt động tốt, nó hiển thị là một hình ảnh mà có hình dạng đa giác, chỉ có một phần hình ảnh rơi xuống bên trong hình dạng được hiển thị trong khi bất kỳ phần nào rơi ra ngoài hình dạng được ẩn

Nhưng bằng cách nào đó tôi đã thử nhiều thứ khác nhau nhưng tôi vẫn không thể hiển thị đường viền/đường viền.

Câu hỏi của tôi là làm thế nào để hiển thị biên giới/đột quỵ trên một hình đa giác được sử dụng để cắt một hình ảnh

Cảm ơn trước

Answer 1

Lúc đầu, xin vui lòng viết ID bằng chữ nhỏ để làm cho đoạn đường dẫn hoạt động: <clipPath id="SVGID_1_">

Thứ hai, chỉ cần sao chép đường dẫn của bạn để sử dụng như hình dạng thông thường.

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

Ngoài ra, bạn có thể xác định bạn con đường như một hình dạng và chỉ đề cập đến tên của nó sau đó:

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

Answer 2

Ở đây bạn đang sử dụng hình ảnh từ bên trong SVG nhưng nếu giả sử bạn đang sử dụng đường dẫn clip trên hình ảnh trong mã html của mình, bạn sẽ không thể cung cấp đường viền theo cách này. Để đạt được điều đó, bạn có thể áp dụng đường dẫn clip đến div vùng chứa của hình ảnh và sau đó cung cấp cho nó nền và đường viền có cùng màu.