WILT: SVG for pie charts

Learnings

  • Titles can be included in paths by adding a title element to a path e.g.

    <path>
        ...
        <title>tooltip</title>
    </path>
    
  • Patterns can be a complete SVG. e.g.

    <pattern id="pattern-0" patternUnits="userSpaceOnUse" width="10" height="10">
            <image xlink:href="data:image/svg+xml;base64,PHN2Zy[...]"></image>
        </pattern>
    
    • If the pattern image doesn't load (due to strong CSP for example) it won't fall back to a color tag. Darnit.
  • Cool way to get variables into the SVG is via the Querystring in a JSON object. e.g. (assuming JSON object only thing after ?)

    <object data='/blog/media/2020/01/graph.svg?{"one":1,"two":2,"twenty":20","nine":9}' type="image/svg+xml"></object>
    
    let search = location.search.substr(1),
        data = JSON.parse(decodeURIComponent(search))
    
  • http://iros.github.io/patternfills/ is a cool site for ye-olde style black-n-white hatches as were used before colour printing in manuals etc.