WILT: SVG for pie charts

Learnings

  • Titles can be included in paths by adding a title element to a path e.g. svg <path> ... <title>tooltip</title> </path>
  • Patterns can be a complete SVG. e.g. svg <pattern id="pattern-0" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSIxIiBjeT0iMSIgcj0iMSIgZmlsbD0iI2U2MTk0QiIvPgo8L3N2Zz4="></image> </pattern>
  • 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.