如何使用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