Can we have a SVG line with stroke, fill and stroke-width

Question

I have coordinates and a given shape as input.Please see the below code. It gives the outline of shape with the coordinates.

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
</svg>

Can I hav edges of a polygon as bars.They should look like individual lines or paths and each having a fill of different colors , stroke and stroke-width. I have tried in below code snippet , but I just get a stroke instead of fill.I need a black stroke and fill color.

<svg height="210" width="500">
 <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="6"></line>
<line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="green"></line>
<line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="blue"></line>
</svg>

** Code with both polygon and lines**

<svg height="500" width="500">
 <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
     <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="16"></line>
      <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="red" fill="red" stroke-width="8"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
     <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
 </svg>

**

** Update : If I remove a line to have one edge without fill and just stroke , its not good to see. I want outer stroke. It just touch the end.Please see below code.**

<svg height="500" width="500">
 <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
     <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="1"></line>  
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
     <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
 </svg>

Image below: O/P image

If you want a fill colour as well simply combine both your drawings together and fill the polygon. — Robert Longson, Oct 18 '18 at 06:40
@RobertLongson - I could not acheive it that way. I fill the polygon and combine both drawings. Please see the above updated code. — user10519853, Oct 18 '18 at 07:12
You want to fill the polygon or fill and stroke the edges of the lines. If its the latter draw pairs of lines with different stroke widths. — Robert Longson, Oct 18 '18 at 07:13
fill and stroke the edges of a line . You mean two lines with same coordinates but with different stroke - width.It will override. — user10519853, Oct 18 '18 at 07:16
Yes, that's what I mean. Or draw the polygon on top instead since it has the thinnest stroke width. But with the polygon you only get one colour. — Robert Longson, Oct 18 '18 at 07:21
@RobertLongson - If I need just the stroke on two edges without fill and on other edge full bar with stroke and fill, will it be possible? I want stroke outer wards. Something similar to this https://stackoverflow.com/questions/52860999/svg-shapes-with-fill-stroke-and-strokewidth — user10519853, Oct 18 '18 at 07:45
I removed the line , but I want it to be like a outer stroke. Its touching the other edge in the middle. I want the connection between two edges to be at the end and sharp .Please check above code and image . @RobertLongson — user10519853, Oct 18 '18 at 10:02
Your best bet is simply to use a tool like Inkscape and draw what you want using overlapping shapes as necessary. — Robert Longson, Oct 18 '18 at 11:03

score 0 · Answer 1 · answered Oct 18 '18 at 11:49

If you combine the polygon and line approach, you can get a reasonable result.

At the back put a black single <polygon> containing all the lines.
And one <line> for each of the lines to give the individualy colours. These have a smaller stroke width than the polygon.

If you set the polygon to use round line joins, and set the lines to have round end caps, it will help camouflage the ugliness at the corners.

If you need neater mitred corners, then the it gets more complicated. You will either have to switch to defining the outlines of your lines yourself. For example by making each of the three lines a filled trapezoidal shape.

<svg height="500" width="500">
  <polygon points="200,10 250,190 160,210" stroke-linejoin="round" stroke="black" fill="none" stroke-width="16" />

  <line x1="200" y1="10" x2="250" y2="190" stroke-linecap="round" stroke="red" fill="none" stroke-width="10"/>
  <line  x1="250" y1="190" x2="160" y2="210" stroke-linecap="round" stroke="green" fill="none" stroke-width="10"/>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linecap="round" stroke="blue" fill="none" stroke-width="10"/>
 </svg>

Can we have a SVG line with stroke, fill and stroke-width

1 Answers1