Pas en mesure de rendre image SVG dans Safari

Comme le titre, j'ai une image svg, mais je ne suis pas capable de l'afficher dans safari et opera. Mais il fonctionne parfaitement bien dans Firefox. J'ai trouvé ce post

Doctype problème d'affichage de SVG avec Safari

qui a parlé à modifier le contenu en xhtml. Donc, j'ai ajouté ce sur le haut de ma page html,

<meta http-equiv="Content-Type" content="application/xhtml+xml">

Mais encore il ne fonctionne pas.

Je suis l'incorporation de l'image svg dans mon fichier JS comme ce

this.my_object.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';

Cela peut-il être la raison? Je ne suis pas de l'appeler par les méthodes classiques de mécanisme.

Je suis aussi de coller le code svg ici,

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>
</svg>

Quelqu'un peut-il suggérer que le problème?

OriginalL'auteur SandBag_1996 | 2012-08-17

  1. 6

    Pour les futurs utilisateurs:
    Trouvé la raison du problème. L'on a accepté la réponse de ce post Safari embeded doctype SVG explique le problème.

    Solution au problème :

    En plus de ci-dessus, j'ai configuré mon site web.fichier de configuration pour ajouter 

    <staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>

    Le serveur doit envoyer correct-tête Content-Type.

    Problème résolu! 🙂

    Assurez-vous de revenir à la marque de votre propre réponse acceptée!
    Je vais le faire, certainement.
    Pour ajouter un objet HTML, l'élément via JS, regardez cette réponse: stackoverflow.com/questions/281246/...

    OriginalL'auteur SandBag_1996

  2. 0

    J'ai récemment rencontré ce problème et a découvert que, parce que mes polygones ont été auto résiliation, Safari 6.0.2 ne serait pas rendre. E. G.:

    Ne fonctionne pas:

    <polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'>

    Travaux:

    <polygon points='-3.172,-1.758 -6.208,-4.793 -8,-3 -8,-8 -3,-8 -4.792,-6.207 -1.757,-3.173'/>

    OriginalL'auteur Eric Norcross