Nicht in der Lage ist zu Rendern von SVG-Bild in Safari
Wie der Titel besagt, ich habe ein svg-Bild, aber ich bin nicht in der Lage zu machen, es in safari und opera. Aber es funktioniert einwandfrei in Firefox. Ich fand diesen Beitrag
Doctype problem beim anzeigen von SVG mit Safari
die genannten Inhalte zu verändern, zu xhtml. So, ich habe das auf meiner html-Seite,
<meta http-equiv="Content-Type" content="application/xhtml+xml">
Aber trotzdem funktioniert es nicht.
Ich bin Einbettung der svg-Grafik in meiner JS-Datei wie folgt
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 dies der Grund sein? Ich fordere nicht es von herkömmlichen Mechanismus.
Ich bin auch einfügen von svg-code hier,
<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 jeder jeden schlagen das problem?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für die künftigen Nutzer:
Den Grund dafür gefunden zu dem problem. Die akzeptierte Antwort von diesem post Safari eingebettete SVG-doctype das problem erklärt.
Lösung für das problem :
Neben den oben konfigurierte ich meine web.config-Datei hinzufügen
Den server schicken sollte, richtigen Content-Type-header.
Problem gelöst! 🙂
Ich habe vor kurzem lief in dieses problem, und entdeckt, dass da meine Polygone waren selbst beenden, Safari 6.0.2 würde das nicht machen. E. G.:
Nicht funktioniert:
Funktioniert: