D3 Masks Breaking when added to vertical line

I’m running into the following issue with masks in D3 that I’ve been quite perplexed by: adding masks to vertical lines makes them disappear: when I set a mask as an attribute as I would for any D3 object, rather than this mask being applied, the entirety of the line disappears!

See the following minimal example, where I construct 3 lines. notvertlineMask is a line that isn’t vertical, and appending the mask to it behaves as desired. vertlineMask is a vertical line with the mask appended to it. It does not render. (note: it is not within a region that would evevn be affected by the mask that we add, which is a circle of radius 20 at (400,400)). vertlineNoMask is a line identical to vertlineMask, except that it doesn’t have a mask appended to it. It renders perfectly.

http://jsfiddle.net/Sidney3/xzqatb83/8/

What might be causing this issue ?? I have a similar problem for horizontal lines, but not for lines that contain a horizontal component (i.e. the line from (0,0) -> (0,1) -> (1,1) will render just fine with a mask appended to it). There doesn’t seem to be anything inherently special about vertical/horizontal lines, so any insight would be appreciated! Output of code and code used in above example is also below for preservation reasons:

Output:
Output of code

Code:

$(document).ready(function() {

  var el = $(".mask"); //selector

  // Set the main elements for the series chart
  var svgroot = d3.select(el[0]).append("svg");
  var mask = svgroot
     .append("defs")
     .append("mask")
     .attr("id", "myMask");
  
  mask.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 800)
    .attr("height", 500)
    .style("fill", "white")
    .style("opacity", 0.7);
    
  mask.append("circle")
    .attr("cx", 400)
    .attr("cy", 400)
    .attr("r", 20);
  var svg = svgroot
    .attr("class", "series")
    .attr("width", "800px")
    .attr("height", "500px")
    .append("g")
    .attr("transform", "translate(0,0)")
  var notvertlineMask = svg
    .append('line')
    .style("stroke","green")
    .style("stroke-width", 10)
    .attr("x1", 20)
    .attr("y1", 20)
    .attr("x2", 40)
    .attr("y2", 200) 
    .attr("mask", "url(#myMask)")
   var vertlineMask = svg //note: breaks
    .append('line')
    .style("stroke", "red")
    .style("stroke-width", 10)
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 200) 
    .attr("mask", "url(#myMask)")
   var vertlineNoMask = svg
    .append('line')
    .style("stroke", "blue")
    .style("stroke-width", 10)
    .attr("x1", 150)
    .attr("y1", 150)
    .attr("x2", 150)
    .attr("y2", 200) 

    
  console.log("svg", svg)


});