Answer the question
In order to leave comments, you need to log in
SVG: Why is mask not visible on a straight line parallel to the axis?
I noticed that a straight line parallel to the axis is not visible under the mask, while a non-parallel one is visible.
Who knows if this is a bug or a feature? Do instead of line - rect?
<svg height="600" width="900">
<defs><mask id="mymask"><rect style="fill: white;" height="40" width="40" y="-10" x="-10"></rect></mask></defs>
<rect style="stroke-width: 0; fill: rgb(0,0,0);" mask="url(#mymask)" y1="5" x1="5" width="100" height="1"></rect>
<line style="stroke-width: 2; stroke: rgb(0,0,0);" mask="url(#mymask)" x1="5" y1="10" x2="100" y2="10"></line>
<line style="stroke-width: 2; stroke: rgb(0,0,0);" mask="url(#mymask)" x1="5" y1="10" x2="100" y2="11"></line>
</svg>
Answer the question
In order to leave comments, you need to log in
all OK
<svg xmlns="http://www.w3.org/2000/svg" height="600" width="900">
<defs><mask id="mymask"><rect style="fill: white;" height="40" width="40" y="-10" x="-10"></rect></mask></defs>
<rect style="stroke-width: 0; fill: rgb(0,0,0);" mask="url(#mymask)" y1="5" x1="5" width="100" height="1"></rect>
<line style="stroke-width: 2; stroke: rgb(0,255,0);" mask="url(#mymask)" x1="5" y1="10" x2="100" y2="10"></line>
<line style="stroke-width: 2; stroke: rgb(255,0,0);" mask="url(#mymask)" x1="5" y1="10" x2="100" y2="11"></line>
</svg>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question