如何使用SVG屏蔽图像并在蒙版部分周围添加颜色笔划？

Question

我正在使用外部svg文件并将文件中的掩码应用到我的网页上的图像。 面具运作良好，但我想在面具周围涂上彩色笔触。 我无法弄清楚如何在外部svg文件中添加一个形状以及如何将其应用于CSS。

现在，面具有一个半透明的笔触，可以说明我想要的颜色笔触的大小。

我怎么能加这个呢？

谢谢

外部SVG文件：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="m1"  x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".45" style="stroke:#909; stroke-width:.05; fill: #ffffff"/>
    </mask>

</svg>

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>test mask</title>
<style> 
body {
background-color:LightBlue;
}
.masked {

    mask: url(svg/filters.xml#m1);

}
</style>
</head>
<body>
<div class="item">
<a href="#">
<img class="masked" src="http://i.imgur.com/nSdiEn3.jpg"/>

</a>
</div>
</body>  
</html>

Answer 1

使用蒙版部分的尺寸创建另一个路径：fill-opacity =“0.0”stroke =“＃000000”stroke-width =“2”

（用所需的值替换笔划和笔划宽度）

如何使用SVG屏蔽图像并在蒙版部分周围添加颜色笔划？

问题描述

1 个解决方案

解决方案1
0 2018-12-23 09:29:48

如何使用SVG屏蔽图像并在蒙版部分周围添加颜色笔划？

问题描述

1 个解决方案

解决方案1 0 2018-12-23 09:29:48

解决方案1
0 2018-12-23 09:29:48