是否可以為SVG元素設置邊框或線性漸變-線

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>