javascript - 是否可以为 SVG 元素设置边框或线性渐变 - line

Question

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

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

下面的灰色和白色条纹实际上是轴的刻度线，从代码上看是这样的:

<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>

现在，我想在这些条纹周围创建一个边框。我试过这样的事情:

<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>

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

Answer 1

您可以使用 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>