Tool to create gradient 100% SVG
New version runing with Firefox 1.5, Opera 9 and Batik 1.6
Design and script are separated.
Script is load on begin
Design is load on request and removed after use.
You can create your design, save it in SVG or SVGZ files.
In main SVG, for using gradient tool, you have to
1) load scripts with
<script xlink:href="js/alert.js"/>
windows alert and prompt
<script xlink:href="js/opera.js"/>
emulate getURL() and parseXML()
<script xlink:href="js/tools.js"/> to
move tool's window
<script xlink:href="js/pickcolor_HSL.js"/>
manage color's choice
<script xlink:href="js/gradient.js"/>
manage tool
Gradient tool use alert and prompt windows
2) reserve in <defs> a group with "motifs" as id to get gradient
created
3) reserve at the end place for design with <g id="messages" transform="translate(100,50)"></g>
by example
4) put in <defs> section gradients used in windows
5) call it with
add_gradient("svg/radialgradient.svg","messages",num)
or
add_gradient("svg/lineargradient.svg","messages",num)
in order: file for design, name of group where put fragment,number for using
6) create function to use result in main SVG as this
function messages_use_gradient(result,num_w)
{
if (!result)
return
nb_gradient+=1;
node=svgdoc.getElementById("gradient");
node.setAttribute("id","gradient"+nb_gradient.toString());
switch(num_w)
{
case
0:
obj=svgdoc.getElementById("rect1");
obj.setAttribute("fill","url(#gradient"+nb_gradient.toString()+")");
break;
...............
}
}
( svgdoc must be name for SVGDocument and name of group +"_use_gradient" name of function )
In SVG design, this function is called when you close window with
onclick="close_gradient(true)".
Function gradient_tape allow using Enter and Escape
keys to close window.
You have to keep id for objects in design or modify script.
When gradient tool is closed with OK, it return gradient with
"gradient" as id.