SVG: Почему не видна маска на прямую линию, параллельную оси?

Question

[Павел Китьян]

Обратил внимание, что прямая линия, параллельная оси, под маской не видна, в то время как непараллельная - видна.

Кто в курсе: это баг или фича? Делать вместо 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 1

[MinimaJack]

все ок

<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>

Comments

[Павел Китьян]

OK - где? Mozialla 27 и Chrome 33 покзывают под маской только rect и наклонную line. Но не параллельную оси line.

Попробуйте убрать mask у первой line. Вот тогда она будет видна.

Я не очень хороший пример сделал - не наглядно.