SVG剪輯圖像，並顯示中風

嗨，我在這個網站新所以請原諒我，如果我對我所試圖做的SVG剪輯圖像，並顯示中風

我的問題不明確的是： -

我使用HTML5和SVG剪切圖像，以便只顯示處於剪切/多邊形形狀內部的圖像部分，而多邊形外部的任何部分不可見/剪切

另外我希望將筆觸寬度和顏色添加到多邊形形狀

的SVG代碼我使用： -

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

上面提到的代碼工作正常，它顯示的，有一個多邊形的形狀，僅圖像部的形狀的內部落下被顯示，而任何一部分的圖像下降的形狀之外是隱藏

但不知何故，我嘗試過各種東西，但我仍無法顯示卒中/邊界。

我的問題是如何顯示上用於裁剪圖像

在此先感謝

來源

2012-10-17 Aditya

上述代碼將剪輯或多邊形內顯示圖像，我所要做的就是添加一個邊框這個多邊形 – Aditya

首先，請寫在小字母標識，以使多邊形形狀的邊框/行程夾路徑工作：<clipPath id="SVGID_1_">

其次，只是重複爲了使用是規則形狀的路徑。

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

或者，您可以定義路徑的形狀，只是指它的名字算賬：

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

退房this doc。

來源

2012-10-17 09:02:51 Nippey

謝謝!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! – Aditya

它完美的作品，我是新來的svg剛剛瞭解它2天后，你能推薦一個網站或一本書，可以教我從基本到先進，再次感謝很多，我幾乎相信，我會永遠無法做到這一點，也是我的僱主尋找的人誰可以在3D格式渲染圖像，而無需使用閃光燈，你看起來像一個專家，如果你有興趣，我可以幫你搞到:) – Aditya

是我的榮幸！不，我的教程是「問題+ Google」。我也喜歡拿現有的文件並通過改變它們來學習。也許只是搜索「svg教程」 – Nippey

在這裏，您使用的是圖像從SVG內，但如果假設你正在使用你的HTML代碼中的圖像剪輯路徑，你將不能夠給它接壤這種方式。爲了實現這一點，您可以將剪輯路徑應用於圖像的容器div，然後爲其提供相同顏色的背景和邊框。

來源

2014-04-29 01:25:03

SVG剪輯圖像，並顯示中風

回答

相關問題