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剪辑图像，并显示中风

回答

相关问题