-1

I have a polygon shape with border, stroke-width and fill colors.

I am looking for multiple polygon shapes; below is one of them with 4 edges. Out of which 3 edges just have stroke and the other edge has fill color.

Image

From above figure we have one side of the polygon with fill and stroke, others just stroke with strokeWidth 1.

I am quite new to SVG. What can be the best way to draw this shape?

Paths, lines, polygons, or combination of this? Will fill-rules be helpful here? Suggestions please.

Andrew Morton
  • 24,203
  • 9
  • 60
  • 84
user10519853
  • 135
  • 1
  • 1
  • 10

1 Answers1

0

A combination of paths and rectangles will likely be what you end up with. I find it easier to fill explicitly because it is easier to manipulate directly with JavaScript if needed.

Here is one solution. I find when working SVG keeping things as simple as possible will make your life much easier.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="777" height="480" style="">                                    
  <title>my vector image</title>                                                                                                 <g class="currentLayer" style="">
  <title>Layer 1</title>
  <rect fill="#4a90d6" stroke="#222222" style="color: rgb(0, 0, 0);" stroke-width="2" stroke-linejoin="round" stroke-dashoffset="" fill-rule="nonzero" id="svg_1" x="8" y="8" width="13" height="74" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 20.8456 8.25316 L 87.1747 7.74683" id="svg_5" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 21.0987 81.924 L 119.073 80.4051" id="svg_9" class="selected"/>
  <path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-opacity="1" stroke-width="2" stroke-dasharray="none" stroke-linejoin="round" stroke-linecap="round" stroke-dashoffset="" fill-rule="nonzero" opacity="1" marker-start="" marker-mid="" marker-end="" d="M 86.162 6.98734 L 118.061 79.6456" id="svg_14" class="selected"/>
  </g>
  </svg>
Randy Casburn
  • 13,840
  • 1
  • 16
  • 31
  • Can both be paths ?. During transitions I want to convert those strokes to filled shapes. I mean the three edges. @RandyCasburn – user10519853 Oct 18 '18 at 03:54
  • (a) A three paths are unnecessary here. You only need one path. (b) Yes, there is no reason you can't use paths for both the filled and unfilled edges. – Paul LeBeau Oct 18 '18 at 11:56
  • yes ... all can be paths. I just threw this together quickly to give you a starting point. – Randy Casburn Oct 18 '18 at 12:41