Is it possible to set a border or linear gradient to an SVG element - line

Question

I am using d3.js to build a timeline which has axis.

Now, in order to make the time range more visible i have increased the axis's tick to a certain width and length as shown in the image below

The gray and white stripes below are actually the tick lines of the axis which looks something like this in terms of code:

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

Now, I want to create a border around these stripes. I tried something like this:

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

As expected, this clearly did not work and I cannot find any way to achieve that. Any Ideas?

Answer 1

You can use an SVG filter to add an outline around a line.

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