SVG DataURL and Chrome BUG
<[email protected]> 06 May 2014 12:10:54 -0700
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
Hello,
Did someone use dataURL to dynamically load svg documents.
It seems as if the document has a gradient that is displayed incorrectly on CHROME.
Here is a test case that works on FireFox and Chrome bug.
It use FileReader.readAsDataURL to load the svg into img (correct) and object (bug) elements.
The HTML page :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SVG load</title>
<script type='text/javascript'>
function previewFile() {
var preview = document.querySelector('img');
var div = document.querySelector('div');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
var embed = document.createElement('object');
preview.src = reader.result;
embed.data = reader.result;
embed.type='image/svg+xml';
embed.width="200px";
embed.height="200px";
div.appendChild(embed);
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<p>image</p>
<img src="" height="200px" alt="Image preview..."/>
<p>embed</p>
<div/>
</body>
------------------------------
The simple svg to load with a gradient :
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="455px" width="800px" viewBox="0 0 800 455" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="grd" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
<stop offset="0%" style="stop-color:peachpuff; stop-opacity:1;"/>
<stop offset="100%" style="stop-color:sienna;stop-opacity:1;"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="845" height="455" style="fill:url(#grd);stroke:none;"/>
</svg>
Any idea ?
Thanks
Joseph LIARD