search

fskpf / svg2roughjs

Create sketchy, hand-drawn-like images from SVGs
https://fskpf.github.io/
MIT License
158 stars 13 forks source link

context-stroke color does not work #107

Open jroessel opened 4 months ago

jroessel commented 4 months ago

Describe the bug context-stroke should be replaced by the stroke value where a marker is rendered. Since we render markers not as markers, but actual geometry we have to replace those special paints accordingly.

To Reproduce

<svg xmlns="http://www.w3.org/2000/svg"
     width="275" height="200" viewBox="0 0 275 200">
  <defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" 
            markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
            orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
    </marker>
  </defs>

  <g fill="none" stroke-width="10">
    <path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75 l 15 15" marker-end="url(#Triangle)"/>
    <path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125" marker-end="url(#Triangle)"/>
  </g>
</svg>

Expected behavior context-stroke should match the stroke color of the surrounding context. Similarly for context-fill. Alternatively we could perhaps detect whether those values are used and simply retain the marker as marker instead of rendering it on our own. We'd lose the per-instance different sketching, but at least it still looks correct.