Problem mit dynamischer Bilderzeugung SVG

StackOverflow https://stackoverflow.com/questions/1623242

  •  06-07-2019
  •  | 
  •  

Frage

Ich versuche, eine serverseitige Skript (PHP) zum Erzeugen eines SVG-Bildes basierend auf Benutzereingaben zu schreiben. Ich verwende den folgenden Code ein: 

<?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>';

?>

Ich habe irgendwo gelesen, dass der MIME-Typ svg + xml sein muss, so habe ich versucht, es in Content-Type-Einstellung, wie Sie oben sehen können. Der richtige Code wird empfangen von Firefox, aber das Bild wird gerendert nicht zu werden. Hat jemand wissen, was hier ändern?

War es hilfreich?

Lösung

Nach der SVG Seite auf Wikipedia sollte SVG als image/svg+xml serviert werden.
Siehe auch: 1.2 SVG MIME-Typ, Dateinamenerweiterung und Macintosh-Dateityp

Die folgenden Meta: 

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

wird nicht definiert, wie ein Inhalt von einem Server bedient wird - es ist eher eine Art und Weise ist, dass die Informationen zu geben, für HTML-Seiten, wenn Sie die Art und Weise nicht definieren kann es serviert ...
Und, ich bin nicht sicher, ob das Meta-Element in der SVG Spezifikationen gültig ist - - ich lasse Sie prüfen, ob ^^


Was Sie tun müssen, hier ist einen HTTP-Header von Ihrem Server senden, die den Inhaltstyp Ihrer Daten.

Dies geschieht mit der PHP- header Funktion; in Ihrem Fall: 

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>';

Hinweis:

  • Ich habe die <meta> und <head> Tags entfernt; nicht sicher, sollte, wenn die <head> entfernt werden, sondern, wie es ....
    • leer war
  • Ich habe den Anruf an die header Funktion hinzugefügt
  • Der SVG rote Kreis wird von firefox richtig angezeigt - so, scheint zu funktionieren; -)

Hope, das hilft!

Andere Tipps

Nur zu sagen, dass dies: 

<?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>

das gleiche wie das funktioniert: 

<?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>

Sie können selbst beurteilen, welche besser lesbar / sauber ist. Wenn Sie viele svg Fragmente verwenden dann kann es sinnvoll, in einigen Fällen macht die xmlns-Erklärungen auf dem HTML-Stammelement zu setzen wie im ersten Beispiel.

Ich habe vor kurzem erfolgreich svg in einem XHTML-Dokument zu verwenden. 

<?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>

Der Trick war das svg zu verwenden: Präfix für jedes Element. Es muss den Namensraum wissen, korrekt durch den Browser analysiert werden.

Dann doscovered ich Raphael Javascript-Bibliothek http://raphaeljs.com/ die svg Handhabung Objekte sehr einfach macht.

Ich hoffe, es hilft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top