marcus/scour
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve and fix behaviour when collapsing straight paths segments (#146)

Browse source 
* Do not collapse straight path segments in paths that have intermediate markers (see #145). The intermediate nodes might be unnecessary for the shape of the path, but their markers would be lost.
* Collapse subpaths of moveto `m` and lineto `l` commands if they have the same direction (before we only collapsed horizontal/vertical `h`/`v` lineto commands)
* Attempt to collapse lineto `l` commands into a preceding moveto `m` command (these are then called "implicit lineto commands")
* Preserve empty path segments if they have `stroke-linecap` set to `round` or `square`. They render no visible line but a tiny dot or square.
This commit is contained in:
Eduard Braun 2017-05-18 00:53:25 +02:00 • committed by GitHub
parent 75bacbc8e6
commit cc592c8e8a
6 changed files with 194 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

33
unittests/collapse-straight-path-segments.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="dot">
<circle r="5px"/>
</marker>
</defs>
<!-- h/v commands should be collapsed into a single h/v commands -->
<path d="m0 0h10 20"/>
<path d="m0 0v10 20"/>
<path d="m0 0h10 0.5v10 0.5"/>
<!-- h/v commands should not be collapsed if they have different direction -->
<path d="m0 0h10 -1v10 -1"/>
<!-- h/v commands should also be collapsed if only start/end markers are present -->
<path d="m0 0h10 20" marker-start="url(#dot)" marker-end="url(#dot)"/>
<path d="m0 0h10 20" style="marker-start:url(#dot);marker-end:url(#dot)"/>
<!-- h/v commands should be preserved if intermediate markers are present -->
<path d="m0 0h10 20" marker="url(#dot)"/>
<path d="m0 0h10 20" marker-mid="url(#dot)"/>
<path d="m0 0h10 20" style="marker:url(#dot)"/>
<path d="m0 0h10 20" style="marker-mid:url(#dot)"/>
<!-- all consecutive lineto commands pointing into the sam direction
should be collapsed into a single (implicit if possible) lineto command -->
<path d="m 0 0 l 10 20 0.25 0.5 l 0.75 1.5 l 5 10 0.2 0.4 l 3 6 0.8 1.6 l 0 1 l 1 2 9 18"/>
<!-- must not be collapsed (same slope, but different direction) -->
<path d="m 0 0 10 10 -20 -20 l 10 10 -20 -20"/>
<!-- first parameter pair of a moveto subpath must not be collapsed as it's not drawn on canvas -->
<path d="m0 0 1 2 m 1 2 1 2l 1 2 m 1 2 1 2 1 2"/>
<!-- real world example of straight path with multiple nodes -->
<path d="m 6.3227953,7.1547422 10.6709787,5.9477588 9.20334,5.129731 22.977448,12.807101 30.447251,16.970601 7.898986,4.402712"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

6
unittests/consecutive-hlines.svg
View file

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="#F00" stroke="#0F0" d="M100,100h100h100v100h-200z"/>
<path fill="#F00" stroke="#0F0" d="M100,300h100,100v100h-200z"/>
<path fill="#F00" stroke="#0F0" d="M100,500h300h-100v100h-200z"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 299 B

8
unittests/path-precision.svg
View file

@ -2,10 +2,10 @@
<svg xmlns="http://www.w3.org/2000/svg">
<path id="p0" d="M 100.0000001 99.9999999 h100.01 v123456789.123456789 h-100 z" />
<path id="p1" d="m 1 12 123 1234 12345 123456 " />
<path id="p2" d="m 1.0 12.0 123.0 1234.0 12345.0 123456.0" />
<path id="p3" d="m 01 012 0123 01234 012345 0123456 " />
<path id="p4" d="m -1 -12 -123 -1234 -12345 -123456 " />
<path id="p1" d="m 1 21 321 4321 54321 654321 " />
<path id="p2" d="m 1.0 21.0 321.0 4321.0 54321.0 654321.0" />
<path id="p3" d="m 01 021 0321 04321 054321 0654321 " />
<path id="p4" d="m -1 -21 -321 -4321 -54321 -654321 " />
<path id="p6" d="m 123.456 101.001 -123.456 -101.001" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 517 B

Before After
Before After

8
unittests/path-with-caps.svg
View file

@ -1,4 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#000" stroke-width="5" stroke-linecap="round" d="m 11,8 0,0" />
<path id="none" d="m0 0 0 0"/>
<path id="attr_butt" d="m0 0 0 0" stroke-linecap="butt"/>
<path id="attr_round" d="m0 0 0 0" stroke-linecap="round"/>
<path id="attr_square" d="m0 0 0 0" stroke-linecap="square"/>
<path id="style_butt" d="m0 0 0 0" style="stroke-linecap:butt"/>
<path id="style_round" d="m0 0 0 0" style="stroke-linecap:round"/>
<path id="style_square" d="m0 0 0 0" style="stroke-linecap:square"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 195 B

After

Width:  |  Height:  |  Size: 522 B

Before After
Before After