【发布时间】：2014-02-01 21:47:28
【问题描述】：
我正在使用外部 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>
【问题讨论】：
-
你也许可以在你的面具上使用 stroke 方法，我从未尝试过，但这是代码的样子。
尝试将路径更改为蒙版，看看是否有效。