Adding some more details for everyone's reference, since I spent too much time trying to solve the same problem...
I don't have a definitive answer but if you look at the documentation for SVG path drawing (Fills and Strokes - SVG | MDN ), it's actually not technically possible to "fill" with a hatch pattern. This means the symbol would have to manually draw each hatch line as a separate path which would be ugly code and a performance hit. One potential option would be to create a "dynamically colored" image to use as the fill, but I didn't find a simple solution for that either (EDIT: actually that is what's implemented in Simon's solution below, but it uses data:Uri, which aren't fully backward compatible to older browsers).
So I can't really fault the Javascript team for skipping this implementation but a simple note in the docs "if you want a colored hatch fill, (which you probably have in your map service), use a PictureFillSymbol. Here's our black & white ones...." would have saved hours of wasted time.