Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Developer
Posts: 39
Registered: ‎03-01-2011
My Device: PlayBook
My Carrier: AT&T

[BUG?] - SVG Rendering

i have been creating an app using SVG for graphics on-the-fly.  i'm having an issue that was equal to chrome, but works fine in mozilla.

 

i create circles with a radial gradient.  then i update the radius of the circle and redraw the circle, and the radial gradient isn't updated.  here's the gradient code:

 

 

<radialGradient id="empty">
<stop offset="25%" style="stop-color:rgb(0,0,0);stop-opacity:.2"/>
<stop offset="50%" style="stop-color:rgb(5,5,5);stop-opacity:.4"/>
<stop offset="75%" style="stop-color:rgb(10,10,10);stop-opacity:.6"/>
<stop offset="100%" style="stop-color:rgb(25,25,25);stop-opacity:.8"/>
</radialGradient>

 

 

here's the code to create the circle:

 

 

N = SVGDoc.createElementNS(svgns,"circle");
N.setAttribute("id", "C"+f); 
N.setAttribute("onmousedown", "ha("+f+")");
N.setAttribute("cx", i*(rad*2+2)+(rad+2)+m); 
N.setAttribute("cy", j*(rad*2-Math.ceil(rad/4)+2)+(rad+2)); 
N.setAttribute("r", rad);
N.setAttribute("opacity",1);
N.setAttribute("style","fill:url(#empty)");
SVGRoot.appendChild(N);

 

i remove the children from the svgroot, update the radius with r+=1, and redraw the circles:

 

 

N = SVGDoc.getElementById('C'+i);
parent = N.parentNode;
parent.removeChild(N);

r+=1;

N = SVGDoc.createElementNS(svgns,"circle");
N.setAttribute("id", "C"+f); 
N.setAttribute("onmousedown", "ha("+f+")");
N.setAttribute("cx", i*(rad*2+2)+(rad+2)+m); 
N.setAttribute("cy", j*(rad*2-Math.ceil(rad/4)+2)+(rad+2)); 
N.setAttribute("r", rad);
N.setAttribute("opacity",1);
N.setAttribute("style","fill:url(#empty)");
SVGRoot.appendChild(N);

 

with a little more code in there for dynamic variables, you get the point.  it works in mozilla, and not in chrome.  it has also been tested with the latest playbook sdk and simulator.  it should keep the radial gradient in the new, larger circle when it is redrawn.  i'm not sure what the bug would be, or if there's a way around it.  it would be great if i could get this resolved so i could finish up my app.

 

 

 

any help would be appreciated!  thanks