Problème avec la génération d'image SVG dynamique

J'essaye d'écrire un script côté serveur (PHP) pour générer une image SVG basée sur l'entrée de l'utilisateur. Je suis en utilisant le code suivant:Problème avec la génération d'image SVG dynamique

<?php 

echo '<?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<head><meta http-equiv="Content-Type" content="svg+xml" /></head> 

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 

</svg>'; 

?>

je l'ai lu quelque part que le type MIME doit être svg + xml alors je l'ai essayé en mettre le type de contenu que vous pouvez voir ci-dessus. Le code correct est reçu par Firefox mais l'image n'est pas rendue. Est-ce que quelqu'un sait quoi changer ici?

Source

2009-10-26 Kshitij Saxena -KJ-

Selon le SVG page on wikipedia, SVG devrait être servi comme image/svg+xml.
Voir aussi: 1.2 SVG MIME type, file name extension and Macintosh file type

La méta suivante:

<meta http-equiv="Content-Type" content="svg/xml" />

ne définit pas la façon dont un contenu est servi à partir d'un serveur - il est plus d'une façon de donner cette information, pour les pages HTML, lorsque vous ne pouvez pas définir la façon dont il est servi ...
Et, je ne sais pas si l'élément meta est valide dans le SVG specifications-je vous laisse vérifier que ^^

Ce que vous devez faire, ici, c'est envoyez un en-tête HTTP à partir de votre serveur, en indiquant le type de contenu de vos données.

Ceci est fait en utilisant la fonction PHP header; dans votre cas:

header('Content-type: image/svg+xml'); 

echo '<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
</svg>';

Note:

J'ai enlevé les <meta> et <head> étiquettes; pas sûr si le <head> doit être retiré, mais, comme il était vide ....
J'ai ajouté l'appel à la fonction header
Le cercle rouge SVG est correctement affiché par Firefox - donc, semble travail ;-)

Espérons que cela aide!

Source

2009-10-26 05:44:13

Merci :) J'étais coincé là-dessus pour beaucoup de temps. Cela fonctionne parfaitement maintenant. –

@Pascal: Oui, il n'y a pas de 'head' dans SVG, et l'élément' meta' est utilisé différemment. – Boldewyn

J'ai récemment réussi à utiliser svg dans un document xhtml.

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

L'astuce consistait à utiliser le préfixe svg: pour chaque élément. Il doit savoir que l'espace de noms doit être correctement analysé par le navigateur.

Puis j'ai découvert la bibliothèque Javascript Raphael http://raphaeljs.com/ qui rend la manipulation des objets svg très facile.

J'espère que cela aide

Source

2009-10-26 06:23:55 luc

Vous n'avez pas besoin d'utiliser des préfixes sur chaque élément, il suffit de mettre xmlns = "http://www.w3.org/2000/svg" sur le (s) élément (s) racine (s) racine (s)

... modulo correct xmlns valeur –

Oh vraiment, Dois-je changer le xmlns: svg? – luc

Il suffit de dire que ceci:

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <head><title>test</title></head> 
    <body> 
    <svg:svg id="display" width="500" heigth="500" viewBox="0 0 500 500"> 
     <svg:rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg:svg> 
    </body> 
</html>

fonctionnera de la même chose que ceci:

<?xml version='1.0'?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head><title>test</title></head> 
    <body> 
    <svg id="display" width="500" heigth="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <rect width="50" height="50" x="100" y="100" fill="red" stroke="black" /> 
    </svg> 
    </body> 
</html>

Vous pouvez juger par vous-même qui est plus lisible/propre.Si vous utilisez beaucoup de fragments svg, il peut être utile dans certains cas de placer les déclarations xmlns sur l'élément racine html comme dans le premier exemple.

Source

2009-10-26 18:35:38

Problème avec la génération d'image SVG dynamique

Répondre

Questions connexes