title: Why is this SVG Path showing incorrect width and height on Firefox?
body: <p>I am new to D3 and SVG and trying to draw a custom shape using SVG path on OSX Firefox 61.0.2 and this is the code below</p>
  
  <pre><code>var svg = d3.select("body")
    .append("svg")
    .attr("width", 1800)
    .attr("height", 600)
  
  function drawCandle(x, y, width, upper, body, lower){
    var path = d3.path()
    // path.moveTo(x + width/2, y)
    // path.lineTo(x + width/2, y + upper + body + lower)
    path.moveTo(x, y + upper)
    path.lineTo(x + width, y + upper)
    path.closePath()
    return path
  }
  
  var p = svg.append('path')
  console.log(p.style('stroke-width'))
  
  p.attr('d', drawCandle(200,100,20, 50, 100, 80))
  </code></pre>
  
  <p>The generated Path when inspected in the developer tools looks like this</p>
  
  <pre><code>&lt;svg width="1800" height="600"&gt;&lt;path d="M200,150L220,150Z"&gt;&lt;/path&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>If I were to however hover using the Inspector on the element, it shows the width as 24 x 4
  <a href="https://i.stack.imgur.com/hIikb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIikb.png" alt="enter image description here"></a></p>
  
  <p>Am I missing something here? Shouldnt this be 20 x 1
  My CSS currently is</p>
  
  <pre><code>path{
    stroke: blue;
    shape-rendering:crispEdges;
  }
  </code></pre>