SVG: Masking a pattern on a <circle> - html

Question

Trying to get a pinstripe-like effect ontop of a circle with a filled color, so that the pattern is masked on top of the circle. I'm not quite sure what I'm doing wrong, but my code seems close to what would be correct.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200">
<defs>
<pattern id="stripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
<g >
<line x1="10" y1="0" x2="0" y2="10" />
</g>
</pattern>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox">
<rect height="300" width="300" style="fill: url(#pinstripe);" />
</mask>
<style>
g {
mask: url(#mask);
stroke: black;
stroke-width: 1px;
stroke-linecap: butt;
stroke-rendering: crispEdges;
}
circle {
fill: green;
}
</style>
</defs>
<g>
<circle cx="100" cy="100" r="100" />
</g>
</svg>
You can look to this fiddle to effectively see nothing - to actually view the circle, remove the mask: url(#mask); style.
So I'm not quite sure what's wrong - I'm just trying to have a circle with a green fill and white stripes on top. Any help would be seriously appreciated!

Answer 1

I think you need to fix your "white" and "black" color because that's what's used in a mask.
Here's an example that works (of your code). Try switching the "white" and "black" colors in the "fill" and "stroke" attributes.
Here's my first example with a "rect":
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200">
<defs>
<pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
<rect x="0" y="0" width="10" height="10" stroke="black" stroke-width="1" fill="white" />
</pattern>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox">
<rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" />
</mask>
<style>
g {
mask: url(#mask);
stroke: black;
stroke-width: 1px;
stroke-linecap: butt;
stroke-rendering: crispEdges;
}
circle {
fill: green;
}
</style>
</defs>
<g>
<circle cx="100" cy="100" r="100" />
</g>
</svg>
EDIT:
Here's another version using line (notice that I'm setting fill and stroke to "#ffffff" or "white" to make this mask:
​
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200">
<defs>
<pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
<line x1="10" y1="0" x2="0" y2="10" fill="#ffffff" stroke="#ffffff" />
</pattern>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox">
<rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" />
</mask>
<style>
g {
mask: url(#mask);
stroke: black;
stroke-width: 1px;
stroke-linecap: butt;
stroke-rendering: crispEdges;
}
circle {
fill: green;
}
</style>
</defs>
<g>
<circle cx="100" cy="100" r="100" />
</g>
</svg>​