Closed
Bug 296018
Opened 20 years ago
Closed 18 years ago
Images in SVG fail to display when image elements replaced using replaceChild
Categories
(Core :: SVG, defect)
Tracking
()
RESOLVED
FIXED
People
(Reporter: hugh.saalmans, Assigned: longsonr)
References
()
Details
Attachments
(3 files)
|
86.26 KB,
application/zip
|
Details | |
|
12.17 KB,
application/zip
|
Details | |
|
2.38 KB,
patch
|
tor
:
review+
bzbarsky
:
superreview+
|
Details | Diff | Splinter Review |
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050510 Firefox/1.0+
I have an XHTML page with SVG in it which contains a group of image elements.
Via JavaScript, a user action triggers an XmlHttpRequest request to a server
which returns a new group of image elements to be displayed (they are all
JPEGs).
The result of the request is an SVG document. The javascript grabs the new
group of image elements and replaces the existing images group in the DOM
using replaceChild.
The new image elements appear in the DOM (using DOM Inspector) and I can right
click on them and see the JPEG's details - but they won't display. This is
irrespective of whether I use suspend/unsuspenRedraw or forceRedraw.
See the additional information for the code and sample SVG.
Reproducible: Always
Steps to Reproduce:
1. Using Javascript - send XmlHttpRequest for new group of SVG image elements
2. Convert result into XML node
3. Replace existing image group with new one
Actual Results:
New images should be displayed on screen
Expected Results:
New image did not display, but were loaded successfully into the DOM
The original doc:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG
/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:svg="http://www.w3.org/2000/svg
">
<head>
<title>Hugle Maps</title>
<script type="text/javascript" language="JavaScript"
src="MapVisualization.js" />
</head>
<body onload="init();" bgcolor="#ece9d8">
<svg:svg version="1.1" width="100%" height="100%"
preserveAspectRatio="xMidYMid meet" zoomAndPan="disable">
<svg:g id="map">
<svg:g id="images" />
<svg:g id="svgData" />
</svg:g>
</svg:svg>
</body>
</html>
A sample response for a image update:
<?xml version="1.0" encoding="UTF-8" ?>
<svg:svg
xmlns:svg="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink
">
<svg:g id="images">
<svg:image x="37" y="227" xlink:href="Images/ecw/9/0/3-4.jpg"
width="125" height="125" />
<!--... more images here ...-->
</svg:g>
</svg:svg>
And lastly, here is all the code to request the new images and add them
the SVG DOM:
function loadXMLDoc(url)
{
//Using Mozilla XMLHttpRequest or MSXML for IE
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.overrideMimeType("text/xml");
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.setRequestHeader("Content-Encoding", "UTF-8");
req.send(null);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.setRequestHeader("Content-
Type", "text/xml");
req.setRequestHeader("Content-Encoding", "UTF-
8");
req.send();
}
}
}
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
var newSvg = req.responseXML.documentElement;
replaceImage(newSvg.firstChild);
} else {
alert("There was a problem retrieving the XML
data:\n" + req.statusText);
}
}
}
function replaceImage(svgNode)
{
var map = document.getElementById("map");
var svgElement = map.ownerSVGElement;
var oldImages = document.getElementById("images");
var token = svgElement.suspendRedraw(0);
map.replaceChild(svgNode, oldImages);
svgElement.unsuspendRedraw(token);
svgElement.forceRedraw();
}
|
||
Comment 1•20 years ago
|
||
attach a testcase please
->Core: SVG
Assignee: nobody → general
Component: General → SVG
Product: Firefox → Core
QA Contact: general → ian
Version: unspecified → Trunk
|
Reporter | |
Comment 3•20 years ago
|
||
Test applicationn contains an XHTML file that uses JavaScript to:
1 - send a request to an ASP file
2 - replace an SVG image element with the response from the ASP file
ZIP also contains 2 JPEGs used for testing.
I'm seeing the same behavior with an SVG file that's being loaded into an empty
document (created withdocument.implementation.createDocument()) and then added
to the current window using appendChild(). Everything in the SVG doc appears
except for the image.
|
||
Comment 5•19 years ago
|
||
SVG images should call ImageURIChanged on being inserted into a document. At
the moment, they do not, hence the issue here.
|
||
Comment 6•19 years ago
|
||
This is another testcase. If one clicks on the text a SVG fragment (mySVGFragment.svg) is loaded using XMLHttpRequest() and appended to the DOM tree. Only the rect and text appears, but not the raster image, although it appears in the DOM.
Also available online at http://www.carto.net/neumann/temp/load_image_xmlhttprequest.svg
|
Assignee | |
Comment 7•18 years ago
|
||
As per comment 5 except that ImageURIChanged has become LoadImage in the intervening period.
The testcase asserts due to bug 295639.
Attachment #233805 -
Flags: review?(tor) → review+
|
|
Assignee | |
Updated•18 years ago
|
Attachment #233805 -
Flags: superreview?(bzbarsky)
|
|
||
Comment 8•18 years ago
|
||
Comment on attachment 233805 [details] [diff] [review]
patch
Looks reasonable.
Attachment #233805 -
Flags: superreview?(bzbarsky) → superreview+
|
|
Assignee | |
Comment 9•18 years ago
|
||
checked in
Status: ASSIGNED → RESOLVED
Closed: 18 years ago
Resolution: --- → FIXED
|
|
||
Comment 10•18 years ago
|
||
*** Bug 287327 has been marked as a duplicate of this bug. ***
You need to log in
before you can comment on or make changes to this bug.
Description
•