How to make an SVG "line" with a border around it?

svg line fill stroke
Tony R picture Tony R · Jan 13, 2012 · Viewed 19.9k times · Source

I have a little svg widget whose purpose is to display a list of angles (see image).

Right now, the angles are line elements, which only have a stroke and no fill. But now I'd like to have an "inside fill" color and a "stroke/border" around it. I'm guessing the line element can't handle this, so what should I use instead?

Notice that the line-endcap of the line's stroke is rounded. I'd like to maintain this effect in the solution.

Angle Line

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>

Answer

Janne picture Janne · Jan 13, 2012

Add a second line, with same coordinates but thinner line width:

<g class="lsNorthAngleHandsContainer">
  <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
  <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>

Related questions

Draw a Connection Line in RaphaelJS

How would I go about drawing a connection line in Raphael where the mousedown initiates the starting point of the line, the mousemove moves the end point without moving the start point and the mouseup leaves it as it is?

Read More
SVG connect two points with a line

Is there any way to connect two point using a line in SVG .I am having the following to create point in SVG. <?xml version="1.0" standalone="no"?> <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.…

Read More
Linear gradient across SVG line

I am wondering about possibility to make linearGradient across (from top to bottom) the line, as opposed to the example below where the gradient goes along (from left to right) the line. <svg xmlns="http://www.w3.org/2000/svg" …

Read More