SVG蒙版垂直线不可见

时间:2017-06-10 17:48:58

标签: svg svg.js

在这个例子中,我使用SVG.js行是不可见的,而line2是。不同之处在于线条完全垂直而线条2不是。你能帮帮我吗?

W=400;
H=400;
s = SVG('mySvg');
s.rect(W,H).fill('#f00')

let maskRect = s.rect(W-20,H-20).move(10,10);
maskRect.attr({
stroke: '#fff',
'strokeWidth': 0,
fill: '#fff'
});
let mask = s.mask().add(maskRect);

//not visible ???
let line = s.line(10,0,10,H);
line.stroke({color: '#0', width:4});
line.maskWith(mask)

//visible
let line2 = s.line(20,0,22,H);
line2.stroke({color: '#0', width:4});
line2.maskWith(mask)

CodePen:https://codepen.io/anon/pen/pwyJxR 如果这与浏览器有关,我在Windows 10上使用Chrome版本58.0.3029.110(64位)

0 个答案:

没有答案