CODEWITHSUNDEEP
csssvgpolyline
Hnry Cn
Hnry Cn

Reputation: 39

How to add spacing between polylines in svg?

I want to add spacing between two polylines. How can I add spacing between the polylines?

I've tried to add the polylines in seperates svg, that didn't help.

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
</svg>

I expect spacing between the two polylines, but the actual output are close to each other.

Upvotes: 1

Views: 259

Answers (3)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

Note that: in points attribute in polyLine: it's represented as:

x1,y1 x2,y2 .. etc

You can see in first polyLine:

2nd Coordinate: 30 for x, and 1for y

3rd Coordinate: 30 for x, and 42 for y

Notice that the y coordinate changed by 41.

So for second polyLine first y coordinate should start from:

42 (the previous coordinate) + 41 (to make equal space distance) = 83

You can now continue 2nd and 3rd coordinate with some calculations.

Working Example: 

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline fill="none" points="30,83 30,124 0,124" style="stroke:green"></polyline>
</svg>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124089

You can use a transform to move things about. E.g.

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline transform="translate(0, 13)" fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
</svg>

Upvotes: 0

Sajan Mevada
Sajan Mevada

Reputation: 11

Just try this. it may work for you.

<svg class="svg-container">
	<polyline fill="none" points="0,1 30,1 30,30" style="stroke:green"></polyline>
	<polyline fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
	</svg>

Upvotes: 1

Related Questions