svg 剪辑图像并显示中风

Posted

技术标签:

【中文标题】svg 剪辑图像并显示中风【英文标题】：svg clip image and show stroke 【发布时间】：2012-10-07 11:13:22 【问题描述】：

嗨，我是这个网站的新手，所以如果我不清楚我要做什么，请原谅我

我的问题是：-

我正在使用 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"
       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- 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_)"   style="border-color:black;border-width:5;"  xlink:href="img.jpg" />
</a>
</svg>

上面提到的代码工作正常，它显示的是一个具有多边形形状的图像，只有落在形状内的图像部分被显示，而任何落在形状外的部分被隐藏

但不知何故，我尝试了各种方法，但仍然无法显示笔触/边框。

我的问题是如何在用于剪辑图像的多边形上显示边框/笔触

提前致谢

【问题讨论】：

上面提到的代码将在多边形形状内剪辑或显示图像，我想做的是为这个多边形形状添加边框 【参考方案1】：

这里您使用的是 SVG 中的图像，但如果假设您在 html 代码中的图像上使用剪辑路径，您将无法以这种方式为其设置边框。 为了实现这一点，您也可以将剪辑路径应用到图像的容器 div，然后为其设置相同颜色的背景和边框。

【讨论】：

【参考方案2】：

首先请用小写字母填写ID，以使剪辑路径正常工作：&lt;clipPath id="SVGID_1_"&gt;

其次，只需复制您的路径以便使用常规形状。

<?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"
       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- 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- 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_)"   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"
       viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
    <path id="myPath" fill="none" stroke="#140063" stroke- 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_)"   style="border-color:black;border-width:5px;"  xlink:href="img.jpg" />
</a>
</svg>

查看this doc。

【讨论】：

谢谢！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ ！！！！！！！！！！！！！！！！！！ 它工作得很好，我是 svg 的新手，两天前才知道它，你能推荐一个网站或一本书，可以教我从基础到高级，再次非常感谢，我几乎确信我永远无法做到这一点，而且我的雇主正在寻找可以在不使用 Flash 的情况下以 3D 格式渲染图像的人，如果您有兴趣，您看起来像专家，我可以联系您 :) 我的荣幸！不，我的教程是“问题+谷歌”。我也喜欢利用现有文件并通过更改它们来学习。也许只是搜索“svg tutorial” 感谢您的提议，但我认为去我的工作场所旅行超过 5000 公里是不值得的！ :o)

以上是关于svg 剪辑图像并显示中风的主要内容，如果未能解决你的问题，请参考以下文章

具有位置的元素：相对于 SVG 剪辑路径未在 Safari 中显示

在 Firefox 60 或更早版本中为 SVG 剪辑路径设置动画时出现随机方块

如何使用 SVG 形状进行图像剪辑？

创建一个反向剪辑路径 - CSS或SVG

如何在 SVG 剪辑路径中居中对齐图像？

使用 SVG 剪辑（或遮盖）DIV