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 个答案: