Javascript 是否可以为SVG元素行设置边框或线性渐变

我正在使用d3.js构建一个具有axis的时间轴

现在，为了使时间范围更加可见，我将轴的刻度增加到一定的宽度和长度，如下图所示

下面的灰色和白色条纹实际上是轴的刻度线，在代码方面类似于此：

<g class="tick" transform="translate(1241.7410071942445,0)" style="opacity: 1;">
    <line y2="-457px" x2="0" y1="55px" style="stroke-width: 202px;"></line>
    <text y="3" x="0" dy=".71em" style="text-anchor: middle;">Oct 05</text>
</g>

10月5日

现在，我想在这些条纹周围创建一个边框。我试过这样的方法：

<g class="tick" transform="translate(1241.7410071942445,0)" style="opacity: 1;">
    <line y2="-457px" x2="0" y1="55px" style="stroke-width: 202px; border: 1px solid black">  </line>
    <text y="3" x="0" dy=".71em" style="text-anchor: middle;">Oct 05</text>
</g>

10月5日

---

正如预期的那样，这显然不起作用，我找不到任何方法来实现这一点。有什么想法吗？

您可以使用SVG过滤器在线条周围添加轮廓

<svg width="200" height="200" 
     viewPort="0 0 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="outline" x="-20%" y="-20%" width="140%" height="140%">
      <feMorphology operator="dilate" radius="1"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0
                                           0 0 0 0 0
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
        </feMerge>
      <filter>
  </defs>

      <g filter="url(#outline)" >
    <line x1="40" y1="120" 
          x2="120" y2="40" 
          stroke="red" 
          stroke-width="10"/>
      </g>
</svg>

我已经看过了它的可能副本，但在我的情况下，这将是棘手的，因为这些线是由d3本身作为axis的一部分绘制的。如果我画这些线，我宁愿使用rect而不是lines，但问题是线条没有填充，它们只能有一种颜色（从笔划开始）。我相信，如果不添加新线或用矩形替换它，您将无法完成您想要的操作。是否可以使用线性渐变？太棒了，这很有效。我在整个轴（不仅仅是直线）周围添加了过滤器，它似乎可以工作。谢谢