在这个例子中,我使用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位)