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
(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.
I can confirm the rendering in Safari v5.0.4 on Windows is this:
The appearance on Chrome 11.0.696.25 beta (Windows) matches what is desired:
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):
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.
精彩评论