Bug 208441 - SVG line stroke-linecap="round" and vector-effect="non-scaling-stroke". Scaling still occurs.
Summary: SVG line stroke-linecap="round" and vector-effect="non-scaling-stroke". Scali...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
: 208475 (view as bug list)
Depends on:
Blocks:
 
Reported: 2020-03-02 03:59 PST by Leigh Williams
Modified: 2023-01-01 06:27 PST (History)
5 users (show)

See Also:

Attachments
Test case reduction (784 bytes, text/html)
2020-03-02 03:59 PST, Leigh Williams 		no flags Details
Test case reduction 2 (1013 bytes, text/html)
2020-03-02 04:28 PST, Leigh Williams 		no flags Details
Usecase (47.76 KB, image/png)
2020-03-11 03:59 PDT, Leigh Williams 		no flags Details
Workaround (790 bytes, text/html)
2020-03-11 04:20 PDT, Leigh Williams 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Leigh Williams 2020-03-02 03:59:36 PST 
Created attachment 392127 [details]
Test case reduction

When using both stroke-linecap="round" and vector-effect="non-scaling-stroke" with an SVG line element, the linecap is still scaling.

See attachment for example.
Comment 1 Leigh Williams 2020-03-02 04:28:26 PST 
Created attachment 392129 [details]
Test case reduction 2
Comment 2 Leigh Williams 2020-03-02 04:31:19 PST 
I should note. This only occurs when the line begins and ends on the same coordinates. I've attached another test case to illustrate this.
Comment 3 Said Abou-Hallawa 2020-03-02 17:56:16 PST 
*** Bug 208475 has been marked as a duplicate of this bug. ***
Comment 4 Radar WebKit Bug Importer 2020-03-02 22:54:42 PST 
<rdar://problem/59983994>
Comment 5 Leigh Williams 2020-03-11 03:59:43 PDT 
Created attachment 393216 [details]
Usecase

I've attached an image of my use case.

I'm drawing a graph. The SVG has `preserveAspectRatio="none"` set which means the graph lines are responsive to changes in the size of the SVG.

The white dots follow the position of the mouse cursor. I don't want these to scale with the SVG.
Comment 6 Leigh Williams 2020-03-11 04:20:27 PDT 
Created attachment 393221 [details]
Workaround

I've attached an example of a workaround.

By slightly offsetting the x1 of the <line>, the circle appears round in Safari.
Comment 7 Ahmad Saleem 2023-01-01 06:27:42 PST 
Is by any change these are related? bug 249265