大佬教程收集整理的这篇文章主要介绍了svg剪辑图像和显示笔划，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的问题是： –
我正在使用HTML5和SVG剪切图像,以便只显示剪裁/多边形内部的图像部分,而多边形外部的任何部分都是不可见/剪裁的
我还希望为多边形形状添加笔触宽度和颜色
我正在使用的SVG代码： –
@H_262_10@<?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>上面提到的代码工作正常,它显示的是一个多边形的图像,只显示落在形状内的图像部分,而隐藏在形状外的任何部分都被隐藏
但不知何故,我尝试了各种各样的东西,但我仍然无法显示笔画/边框.
我的问题是如何在用于剪裁图像的多边形形状上显示边框/笔触
提前致谢
其次,只需复制您的路径以便使用为常规形状.
@H_262_10@<?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.64z"/> </clipPath> <path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64 c0,64.569 c-0.183,83.151 S-7.896,19.836 c6.471,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.825-35.329-33.088-26.511 c-39.905,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>或者,您可以将路径定义为形状,然后再引用其名称：
@H_262_10@<?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,64.569 c-0.183,83.151 S-7.896,19.836 c6.471,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.825-35.329-33.088-26.511 c-39.905,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.
以上是大佬教程为你收集整理的svg剪辑图像和显示笔划全部内容，希望文章能够帮你解决svg剪辑图像和显示笔划所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。