it-swarm.com.de

SVG-Bild kann in Safari nicht gerendert werden

Wie der Titel besagt, habe ich ein SVG-Bild, aber ich kann es nicht in Safari und Oper rendern. Aber in Firefox funktioniert es einwandfrei. Ich habe diesen Beitrag gefunden

Doctype Problem beim Anzeigen von SVG mit Safari

die erwähnt hat, um den Inhalt in xhtml zu ändern. Also fügte ich dies oben auf meiner HTML-Seite hinzu,

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

Aber es funktioniert immer noch nicht.

Ich binde das SVG-Bild wie folgt in meine JS-Datei ein

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

Kann das der Grund sein? Ich nenne es nicht konventionell.

Ich füge hier auch den SVG-Code ein.

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

Kann jemand das Problem vorschlagen?

10
SandBag_1996

Für zukünftige Benutzer: Den Grund für das Problem gefunden. Die akzeptierte Antwort auf diesen Beitrag Safari eingebettet SVG-Doctype erklärt das Problem.

Lösung für das Problem :

Außerdem habe ich meine web.config-Datei so konfiguriert, dass sie hinzugefügt wird

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

Der Server sollte den richtigen Content-Type-Header senden.

Problem gelöst! :)

6
SandBag_1996

Ich bin kürzlich auf dieses Problem gestoßen und habe festgestellt, dass meine Polygone in Safari 6.0.2 nicht gerendert werden, da sie sich selbst beenden. Z.B.:

Funktioniert nicht:

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

Werke:

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