I'm using a mask on a line to make a portion of it disappear. This line has a marker on it. When the line is getting vertical, some part of the marker is missing. The same occurs when line is getting horizontal too.
I checked the mask dimension with chrome dev tools, it seems to be correct:
The issue has been identified in chrome and firefox.
Here is the code that reproduce the issue:
<html>
<style>
.link {
stroke: black;
stroke-width: 1.5px;
}
</style>
<body>
<div id="svg-body">
<svg viewBox="0,0,600,400">
<defs>
<marker id="end" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="6" markerHeight="6" orient="auto">
<polyline points="0,-5 10,0 0,5"></polyline>
</marker>
</defs>
<g class="link">
<mask id="CP_0">
<rect width="100%" height="100%" fill="white"></rect>
<rect class="link-text-bg"
fill="black"
width="100"
height="20"
x="90"
y="250"
></rect>
</mask>
<line class="link-line" mask="url(#CP_0)" marker-end="url(#end)"
x1="100"
y1="200"
x2="140"
y2="300"></line>
</g>
<g class="link">
<mask id="CP_1">
<rect width="100%" height="100%" fill="white"></rect>
<rect class="link-text-bg"
fill="black"
width="100"
height="20"
x="190"
y="250"
></rect>
</mask>
<line class="link-line" mask="url(#CP_1)" marker-end="url(#end)"
x1="200"
y1="200"
x2="210"
y2="300"></line>
</g>
<g class="link">
<mask id="CP_2">
<rect width="100%" height="100%" fill="white"></rect>
<rect class="link-text-bg"
fill="black"
width="100"
height="20"
x="290"
y="250"
></rect>
</mask>
<line class="link-line" mask="url(#CP_2)" marker-end="url(#end)"
x1="300"
y1="200"
x2="302"
y2="300"></line>
</g>
</svg>
</div>
</body>
</html>