271556 - Dynamic update of <linearGradient> after it was added to <defs> does not render correctly

Status: VERIFIED WORKSFORME

(Core :: SVG, defect)

Description

[JP Fiset]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a5) Gecko/20041122

When a linearGradient is added dynamically to the <defs> section, it mut be
fully defined or the gradient is not rendered correctly. Please refer to the
following example.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg 
	xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" 
	viewbox="0 0 100 100"
	onload="init(evt);">

	<script type="text/javascript">
		<![CDATA[
			var g_svgNS = "http://www.w3.org/2000/svg";
			var g_xlinkNS = "http://www.w3.org/1999/xlink";
			var g_svgDefs = null;
			var g_testGroupElement = null;
	
			function init(evt) 
			{
				// Get defs section
				if( null == g_svgDefs )
				{
					g_svgDefs = document.getElementsByTagNameNS(g_svgNS,"defs").item(0);
				}
				
				// Find test group
				if( null == g_testGroupElement )
				{
					g_testGroupElement = document.getElementById('testGroup');
				}
				
				// Create gradient # 1
				var gradientDefs = document.createElementNS(g_svgNS,'linearGradient');
				gradientDefs.setAttributeNS(null,'id','gradient_1');
				this.startGradient = document.createElementNS(g_svgNS,"stop");
				this.startGradient.setAttributeNS(null,"offset","0%");
				this.startGradient.setAttributeNS(null,"stop-color","rgb(255,255,255)");
				gradientDefs.appendChild(this.startGradient);
				this.endGradient = document.createElementNS(g_svgNS,"stop");
				this.endGradient.setAttributeNS(null,"offset","100%");
				this.endGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
				gradientDefs.appendChild(this.endGradient);
				<!-- This linear gradient is fully defined before it is added to the
definitions -->
				g_svgDefs.appendChild(gradientDefs);
				
				// Create gradient # 2
				var gradientDefs = document.createElementNS(g_svgNS,'linearGradient');
				gradientDefs.setAttributeNS(null,'id','gradient_2');
				<!-- This linear gradient is added to the definitions before it is fully
defined -->
				g_svgDefs.appendChild(gradientDefs);
				this.startGradient = document.createElementNS(g_svgNS,"stop");
				this.startGradient.setAttributeNS(null,"offset","0%");
				this.startGradient.setAttributeNS(null,"stop-color","rgb(255,255,255)");
				gradientDefs.appendChild(this.startGradient);
				this.endGradient = document.createElementNS(g_svgNS,"stop");
				this.endGradient.setAttributeNS(null,"offset","100%");
				this.endGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)");
				gradientDefs.appendChild(this.endGradient);
				
				// Create element using the gradient 1
				var line = document.createElementNS(g_svgNS,"line");
				line.setAttributeNS(null,"x1",10);
				line.setAttributeNS(null,"y1",30);
				line.setAttributeNS(null,"x2",90);
				line.setAttributeNS(null,"y2",30);
				line.setAttributeNS(null,"stroke",'url(#gradient_1)');
				line.setAttributeNS(null,"stroke-width",6);
				g_testGroupElement.appendChild(line);
				
				// Create element using the gradient 2
				var line = document.createElementNS(g_svgNS,"line");
				line.setAttributeNS(null,"x1",10);
				line.setAttributeNS(null,"y1",60);
				line.setAttributeNS(null,"x2",90);
				line.setAttributeNS(null,"y2",60);
				line.setAttributeNS(null,"stroke",'url(#gradient_2)');
				line.setAttributeNS(null,"stroke-width",6);
				g_testGroupElement.appendChild(line);
			}
		]]>
	</script>
	<defs />
	<g id="testGroup">
		<rect x="0" y="0" width="100" height="100" style="stroke:none;fill:#ddddff;"/>
	</g>
</svg>

This example is creating two linear gradients dynamically. Both are added to the
<defs> section. Then, two lines are drawn, each using one of the two linear
gradients. Since gradients are the same, both lines should display similarly.
However, The line defined using gradient_2 uses a "default" gradient, not one
specified.

The problem seems to come from the fact that the second gradient is not fully
defined when it is added to <defs> section. Although, it is fully defined by the
time it is used in the line drawing appears to be irrelevant. In other words,
dynamic behaviour of elements within the <defs> section does not seem to get
propagated.

I do not know if this falls outside the scope defined by the SVG standard.
Therefore, I do not know what the behaviour is expected here. However, I have
come accross an SVG application that did not work, and traced the issue down to
this.

Reproducible: Always
Steps to Reproduce:

Comment 1

[JP Fiset]

Attachment: Corrected Test Case

Fixed error where XML comments were used in javascript. Ignore description and
use this test case.

Comment 2

[Jonathan Watt [:jwatt]]

This seems to work now. The problem was probably fixed by the fix for bug
276316. Marking worksforme.

Comment 3

[JP Fiset]

Yes, works for me too, now.