Question

在下面的示例中，蒙版在绿线和蓝线上的工作原理应该如此，但是水平红线完全消失。当面具被移除时，红线似乎没有任何问题。发生了什么事？

＆＃13;

cart.setId(user.getId())

＆＃13;

document.querySelector('button').addEventListener('click', function(){
    document.getElementById('problem-line').removeAttribute('mask')
}, false)

＆＃13;

Answer 1

maskUnits is objectBoundingBox的默认值。您所遇到的关键问题在last paragraph of the specification text。

中有所描述

当适用元素的几何图形没有宽度或没有高度时，不应使用关键字objectBoundingBox，例如水平线或垂直线的情况，即使由于具有非零值而在查看时线条具有实际厚度时也是如此因为边界框计算忽略了笔划宽度，所以笔划宽度。当适用元素的几何体没有宽度或高度且指定了objectBoundingBox时，将忽略给定的效果（例如，渐变或滤镜）。

如果你有一条水平线，为什么不使用带有填充的矩形而不是带有笔划的线？或者使用userSpaceOnUse单位。

SVG Mask让线条消失

1 个答案: