Question

我正在使用D3构建交互式时间轴。在SVG画布周围，我将黑色线条作为视觉边框。现在在Firefox和Edge中，当我将x1和x2值设置为0时，左侧边线是不可见的，而在Chrome中则显示左边界线（请参阅下面的代码段）。一种解决方案是始终将它们设置为1，但是在Chrome中，其他元素可以在此边框的左侧可见，这是不合需要的。如何使我的代码适应客户端浏览器？ This question询问如何检测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>

Answer 1

当你绘制一条线的时候，一边绘制1/2，另一边绘制1/2。

如果你从0,0到0绘制它，例如w，则该线的1/2位于可视区域之外，因为该线在y方向上从-0.5延伸到0.5。

尝试从边缘绘制1/2行程宽度的线条，以便可以看到整条线。

定位SVG元素时如何处理浏览器怪癖

1 个答案: