11521 sujets

JavaScript, DOM et API Web HTML5

Injecter du svg dans le dom (pas d'interprétation)

Modérateur
Salut tout le monde,

En ce moment, je dois reprendre un projet en cour d'élaboration.... Sur ce site, le client voudrait qu'il y ait des images floutées dynamiquement (à certaines étapes de la visite du site, les images deviennent de plus en plus net (s'il remplit les deux formulaires, il pourra voir des albums photos proprement)). Sur le site il y a un plugin qui gère ce genre de choses. Seulement, le gros souci, Firefox ne gère pas encore les filtres CSS pour le floue gaussien. Le plugin utlise ses specificités (filter). De mon côté, je me suis dit qu'en injectant dynamiquement du svg et afficher une image floue, ça devrait fonctionner. Firefox gère très bien le SVG. Seulement là, j'ai un hic. Dans la console, tout s'affiche correctement, par contre, l'image ne se charge pas ? Pourquoi ? Pourtant le SVG est valide.
En injectant une image tout bête (img), ça fonctionne. Pourquoi le svg n'est pas interprété ? Avez vous une idée ?


Voici le code :


if(/Gecko/.test(navigator.userAgent) && /Firefox/i.test(navigator.userAgent)){
	var listPath = [
		'p img'
	];
	for (var n = 0 ; n < listPath.length ; n++) {
		var elBlur = document.querySelectorAll(listPath[n]);
		
		for(var k = 0 ; k < elBlur.length ; k++){
			//init			
			var 	testAdresse = /img$/i.test(listPath[n]),
				srcElBlur = testAdresse ? elBlur[k].src : elBlur[k].style.backgroundImage ,
				imageBlur = {
					urlImage 	: testAdresse ? elBlur[k].src : srcElBlur.match(/url\("(.+)"\)/i)[1],
					imageWidth 	: testAdresse ? elBlur[k].width : elBlur[k].style.width,
					imageHeight	: testAdresse ? elBlur[k].height : elBlur[k].style.height
			};
			
			//svg
			var 	elSvg = document.createElement('svg');
				
			elSvg.setAttribute('width',imageBlur.imageWidth);
			elSvg.setAttribute('height',imageBlur.imageHeight);
			elSvg.setAttribute('xmlns','http://www.w3.org/2000/svg');
			elSvg.setAttribute('xml:lang','fr');
			elSvg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');
			
			var 	elTitle = document.createElement('title'),
				txtTitle = document.createTextNode('image floutée');
				
			elTitle.appendChild(txtTitle);
			elSvg.appendChild(elTitle);
			
			var 	elStyle = document.createElement('style'),
				txtElStyle = document.createTextNode('#imageSvg'+n+''+k+'{ filter:url(#flou1'+n+''+k+'); }');
			
			elStyle.setAttribute('type','text/css');
			elStyle.appendChild(txtElStyle);
			elSvg.appendChild(elStyle);
			
			
			var 	elFilter = document.createElement('filter'),
				elGaussien = document.createElement('feGaussianBlur');
				
			elFilter.setAttribute('id','flou1'+n+''+k);
			elGaussien.setAttribute('stdDeviation','10');
			
			elFilter.appendChild(elGaussien);
			elSvg.appendChild(elFilter);
			
			var	elImageSvg = document.createElement('image');
			
			elImageSvg.setAttribute('xlink:href',imageBlur.urlImage);
			elImageSvg.setAttribute('id','imageSvg'+n+''+k);
			elImageSvg.setAttribute('x',0);
			elImageSvg.setAttribute('y',0);
			elImageSvg.setAttribute('width',imageBlur.imageWidth);
			elImageSvg.setAttribute('height',imageBlur.imageHeight);
			
			elSvg.appendChild(elImageSvg);
			
			
			
			var elT = document.createElement('img');
			elT.setAttribute('src',imageBlur.urlImage);
			elT.setAttribute('id',imageBlur.urlImage+n+k);
			
			if (testAdresse) {
				elBlur[k].style.display = 'none';
				elBlur[k].parentNode.appendChild(elSvg); //svg
				elBlur[k].parentNode.appendChild(elT); //img
				
				
				
			}
		}
	}
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <p><img src="tux.jpg" alt=""></p>
    <hr />
        <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xml:lang="fr" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>image floutée</title><style type="text/css">#imageSvg00{ filter:url(#flou100); }</style>
            <filter id="flou100"><fegaussianblur stddeviation="10"></fegaussianblur></filter>
            <image xlink:href="tux.jpg" x="0" y="0" width="400" height="165" />
        </svg>
    <script type="text/javascript" src="blur-ff.js"></script>
</body>
</html>




Si vous avez une idée, merci de m'éclairer.

Bonne soirée
Modifié par niuxe (12 Sep 2014 - 00:20)
Sujet clos
Aller à