javascript - 定位 SVG 元素时如何处理浏览器异常

Question

我正在使用 D3 构建交互式时间线。在 SVG Canvas 周围，我放置了黑线作为视觉边框。现在，在 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 的线条，以便完整的线条可见。