How can I mask an image with SVG and add a color stroke around the masked portion?
Question
I am using an external svg file and applying a mask from the file to an image on my web page. The mask is working well, but I'd like to have a colored stroke around the mask. I can't figure out how to add just a shape in an external svg file and how to apply that with CSS.
Right now the mask has a semi transparent stroke to kind of illustrate the size of the stroke I would like with color.
How could I add this?
Thanks
External SVG File:
<?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>
1 answers
solution1
0 2018-12-23 09:29:48
Create another path with the dimensions of the masked portion with: fill-opacity="0.0" stroke="#000000" stroke-width="2"
(replace stroke and stroke-width with the desired values)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.