定位SVG元素时如何处理浏览器怪癖(How to handle browser quirks when positioning SVG elements)

我正在使用D3构建交互式时间轴。 在SVG画布周围，我将黑色线条作为视觉边框。 现在在Firefox和Edge中，当我将x1和x2值设置为0时，左边界线是不可见的，而在Chrome中则显示左边界线（请参阅下面的代码片段）。 一种解决方案是始终将它们设置为1，但是在Chrome中，其他元素可以在此边框的左侧可见，这是不合需要的。 如何使我的代码适应客户端浏览器？ 这个问题询问如何检测Chrome，但答案似乎相当骇人听闻。 有没有办法在这里使用特征检测？

var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var padding = 50;
svg.attr("width", w)
   .attr("height", h);
var leftPadding = 0;
var leftBorderLine = svg.append("line")
  .attr("x1", leftPadding)
  .attr("x2", leftPadding)
  .attr("y1", 0)
  .attr("y2", h)
  .attr("stroke", "black")
  .attr("stroke-width", 1)
  .attr("shape-rendering", "crispEdges") 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 
I'm building an interactive timeline using D3. Around the SVG canvas I've placed black lines as visual borders. Now in Firefox and Edge the left borderline is invisible when I set its x1 and x2 values to 0, while in Chrome it shows up (see code snippet below). One solution would be to always set them to 1, but then in Chrome, other elements can be visible to the left of this border which is undesirable. How can I adapt my code to the client browser? This question asks how to detect Chrome but the answers seem rather hacky. Is there a way of using feature detection here? 
 
 
 
  
  
var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var padding = 50;
svg.attr("width", w)
   .attr("height", h);
var leftPadding = 0;
var leftBorderLine = svg.append("line")
  .attr("x1", leftPadding)
  .attr("x2", leftPadding)
  .attr("y1", 0)
  .attr("y2", h)
  .attr("stroke", "black")
  .attr("stroke-width", 1)
  .attr("shape-rendering", "crispEdges") 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
  
 

                
最满意答案
                
                    
                        
 当您绘制一条线时，一侧绘制1/2的笔划，另一侧绘制1/2。 
 
 如果你从0,0到0绘制它，例如w，则该线的1/2位于可视区域之外，因为该线在y方向上从-0.5延伸到0.5。 
 
 尝试从边缘绘制1/2行程宽度的线条，以便可以看到整条线。 
When you draw a line 1/2 of the stroke is drawn at one side and 1/2 at the other. 
 
If you draw it from 0, 0 to 0, w for instance then 1/2 of the line is outside the viewable area since the line extends from -0.5 to 0.5 in the y direction.
 
Try drawing your lines 1/2 a stroke width in from the edge so that the complete line is visible.