CODEWITHSUNDEEP
svg
Matt
Matt

Reputation: 23

SVG Polyline with stroke-linejoin:round not showing a rounded corner

I'm seeing a strange rendering issue in an SVG that I'm generating. I've narrowed it down to a small reproducible case.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <polyline points="41,36 40,35 42,37" style="stroke:black; stroke-linecap:round; stroke-linejoin:round; stroke-width:70"/>
</svg>

This renders as
http://cl.ly/3f023z1w281D1Y2K3d0Q
(at least when viewed in Safari, Mac Chrome, or Mac Firefox). I would expect something that looks more like a very slightly deformed circle.

Am I missing something? I'm very new to SVG, so hopefully there's something obvious I've overlooked.

Upvotes: 2

Views: 3313

Answers (1)

Phrogz
Phrogz

Reputation: 303381

I can confirm the rendering in Safari v5.0.4 on Windows is this:
Half Circle

The appearance on Chrome 11.0.696.25 beta (Windows) matches what is desired:
Oblong Circle

The problem stems from the fact that three points that you have chosen are all exactly along a line and make a 180 degree turn. You get similarly 'bad' results if you use points="100,0 110,0 90,0". If you change the first point from 41,36 to 41.01,36 then you see correct results in Safari (and the WebKit nightly build current as of this posting):
Full Circle

This simply appears to be a ~bug in some rendering engines, specifically how they choose to draw stroke-linejoin:round when the line makes exactly a 180 degree turn. I have created a test page showing this issue as part of a bug report against WebKit.

Upvotes: 3

Related Questions