CODEWITHSUNDEEP
svg
Bruce Bartlett
Bruce Bartlett

Reputation: 223

Strange behaviour with svg path

Consider the following svg code:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

<path d="M 180 100 C 180 105 180 120 182 120 " stroke="black" fill="none" stroke-width="3"></path>

</svg>

My browser (chrome) renders it as follows. Note the weird "pacman" effect at the end of the path.

enter image description here

What is going on here?

Upvotes: 1

Views: 278

Answers (1)

rtx13
rtx13

Reputation: 2610

When the line width is large in relation to the "tightness" of the curve, as is the case in your path definition, odd rendering effects may happen.

Please refer to section 13.5.7. Computing the shape of the stroke of the svg spec for details:

Authors should be aware that the shape of a stroke may in some cases, such as at extremely tight curves, differ across platforms. Image showing how stroke shape differs across platforms.

For why this may be happening, think of this shape as a self-intersecting, filled polygon and consider it being rendered using the oddeven rule for fill (See section 13.4.2. Winding rule: the ‘fill-rule’ property).

Here's an exaggerated version of your curve using a line width of 50 to illustrate this behaviour:

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">

<path d="M 180 100 C 180 105 180 120 182 120 " stroke="black" fill="none" stroke-width="50"></path>

</svg>

Finally, here is a visualization of a "thin, wide brush" painting the very bottom of your shape. Specifically note how it backtracks over an already painted area towards the end of the line.

enter image description here

... and here is just the perimeter of the shape made with the two tips of a "thin, wide brush":

enter image description here

Upvotes: 2

Related Questions