开发者

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

开发者 https://www.devze.com 2023-01-25 21:51 出处:网络
I\'m seeing a strange rendering issue in an SVG that I\'m generating.I\'ve narrowed it down to a small reproducible case.

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

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

(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:

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

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

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

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):

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

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

精彩评论

暂无评论...
验证码 换一张
取 消