Home/ Questions/Q 4113604
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:20:49+00:00

I’m seeing a strange rendering issue in an SVG that I’m generating. I’ve narrowed

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0