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?

Reply via email to