If I want a rectangle with a gradient I can use the SVG plugin like so: svg.linearGradient(defs, 'myGradient', [[0, '#0ff'], [1, '#f08']], 0, 0, 1, 1, null); svg.rect(defs, 'myRect', [[0, '#0ff'], [1, '#f08']], 0, 0, 1, 1, null); svg.rect(defs, 0, 0, 16, 16, {fill: 'url(#myGradient)'})
svg.use(null, '#myRect'); That works exactly as expected. But sometimes I have some pre-made SVG that I want to throw in. svg.add(defs, '<linearGradient id="myGradient" y2="1" y1="0" x2="1" x1="0"><stop offset="0" stop-color="#0ff"/><stop offset="1" stop- color="#f08"/></linearGradient><rect id="myRect" x="0" y="0" width="16" height="16" fill="url(#myGradient)"/>'); svg.use(null, '#myRect'); This doesn't work quite as expected. The rectangle appears without its gradient, just solid black. I checked the DOM with Firebug and the linearGradient element appears in the defs tag just as if I used the library method. How do get my gradient to show?