CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
Ashima
Ashima

Reputation: 4824

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

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 enter image description here

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?

Upvotes: 0

Views: 742

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

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>

Upvotes: 1

Related Questions