Broken path rendering
ygra opened this issue · 5 comments
ygra commented
E.g.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="500" height="500" viewBox="-0.2 -0.2 19.4 19.4" version="1.1">
<defs>
<pattern id="grey" width="1" height="1" viewBox='0 0 3 3' patternUnits='userSpaceOnUse'>
<rect width='3' height='3' fill='#fff'/>
<path stroke-width='0.1' d='M0 0 l 3 3 M-1 0 l 3 3 M-2 0 l 3 3 M -3 0 l 3 3 M 1 0 l 3 3 M 2 0 l 3 3 M 3 0 l 3 3' stroke-linecap='square' stroke='#d2d2d2'/>
</pattern>
<pattern id="blue" width="1" height="1" viewBox='0 0 3 3' patternUnits='userSpaceOnUse'>
<rect width='3' height='3' fill='#fff'/>
<path stroke-width='0.1' d='M0 0.8h3M0,1.8h3M0,2.8h3 M0.4 0v3M1.4 0v3M2.4 0v3' stroke-linecap='square' stroke='#30ceff'/>
</pattern>
<pattern id="red" width="1" height="1" viewBox='0 0 3 3' patternUnits='userSpaceOnUse' patternTransform='translate(0.2 0)'>
<rect width='3' height='3' fill='#fff'/>
<path stroke-width='0.1' d='M0 0 l -3 3 M4 0 l -3 3 M5 0 l -3 3 M 6 0 l -3 3 M 1 0 l -3 3 M 2 0 l -3 3 M 3 0 l -3 3' stroke-linecap='square' stroke='#f99'/>
</pattern>
<pattern id="green" width="1" height="1" viewBox='0 0 3 3' patternUnits='userSpaceOnUse' patternTransform='translate(0.167 0)'>
<rect width='3' height='3' fill='#fff'/>
<path stroke-width='0.1' d='M0 0 l 3 3 M-1 0 l 3 3 M-2 0 l 3 3 M -3 0 l 3 3 M 1 0 l 3 3 M 2 0 l 3 3 M 3 0 l 3 3M0 0 l -3 3 M4 0 l -3 3 M5 0 l -3 3 M 6 0 l -3 3 M 1 0 l -3 3 M 2 0 l -3 3 M 3 0 l -3 3' stroke-linecap='square' stroke='#3cb255'/>
</pattern>
</defs>
<rect fill="url(#grey)" width="19" height="19"/>
<path fill='none' stroke='#d2d2d2' stroke-dasharray='0.4,0.2' stroke-width='0.08' d='M0 9 V 0 H 9m 1 0H19V9 m0 1 V19H10 m-1 0 H0 V10'/>
<rect fill='url(#green)' x='2' y='2' width='15' height='15'/>
<path fill='none' stroke='#3cb255' stroke-dasharray='0.4,0.2' stroke-width='0.08' d='M4 2h5m1 0h5M2,4v5m0 1v5M4,17h5m1 0h5M17,4v5m0,1v5'/>
<path fill='url(#red)' d='M9 0h1v4H15V9h4v1h-4V15H10v4h-1v-4H4V10h-4v-1h4V4H9z'/>
<path fill='none' stroke='#f99' stroke-dasharray='0.4,0.2' stroke-width='0.08' d='M1 9 H0v1h1 m 1 0 h1 m0 -1 h-1 M9 1V0h1v1m0 1v1 m-1 0 v-1 M18 9h1v1h-1 m-1 0h-1m0 -1 h1M9 16v1m0 1v1h1v-1m0-2v1'/>
<path fill='url(#blue)' d='M2 15h2v2h-2 M15 2h1v1h-1 M15 16h2v1h-2'/>
<path fill='none' stroke='#3065ff' stroke-dasharray='0.4,0.2' stroke-width='0.08' d='M3 15h-1v2h2v-1 M15 16v1h2v-1 M15 3v-1h1'/>
<path fill-rule='evenodd' stroke='#000' stroke-width='.08' d='M2 2h2v1H16V2h1v2h-1V15h1v1H3V4H2 M4 4h11v11H4 M5 5 h9v9h-9 M6 6 h7v7h-7 M7 7h5v5h-5 M8 8h3v3h-3 M9 9h1v1h-1 M1 9h1v1h-1 M9 1h1v1h-1M17 9h1v1h-1 M9 17h1v1h-1'/>
</svg>
Original:
Broken rough rendering:
ygra commented
Another example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 284 587" width="568" height="1147">
<path stroke="#000" stroke-width="20" d="M142,0v471M33,83h218M0,142h284M100,501h84M66,539h152M33,577h218"/>
</svg>
fskpf commented
See also rough-stuff/rough#183
Even simpler SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 284 587" width="568" height="1147">
<path stroke="#000" stroke-width="20" d="M142,0v471M33,83h218"/>
</svg>
We've enabled combineNestedSvgPaths by default due to rough-stuff/rough#158. I guess this should be only enabled if actually needed. Can we detect nested paths somehow?
fskpf commented
I think we should just disable combineNestedSvgPaths for now. The effect of it being enabled by default is greater than disabling it such that 'nested' paths are rendered worse.
sonovice commented
Can we detect nested paths somehow?
I think, this is usually done with something like the Greiner–Hormann clipping algorithm, though I am not really proficient in algorithmic graphics stuff.