Sie befinden sich hier im Forenarchiv von phpforum.de wenn Sie direkt ins Forum möchten, klicken Sie bitte hier. Zur Startseite kommen Sie hier.

SVG in Html einbinden

Ich habe folgendes Problem.

Ich möchte eine selbsterstellte SVG-Datei in einem Html-Dokument anzeigen lassen.
Der Aufruf sieht so aus:
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>


Allerdings bekomme ich nur eine weiße Fläche zu sehen.
wenn ich die Dateien einfach im IE aufrufe sind sie aber korrekt zu sehen.

Kennt jemand das Problem?

Hier gehts zum Orginal Eintrag "SVG in Html einbinden" im Forum

Antworten

Ich hab herausgefunden das der Fehler in der SVG Datei liegen muß.
Ich poste mal den wichtigen Teil, vielleicht sieht jemand den Fehler und kann mir helfen. :)

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg version="1.1" id="svgMap" onload="init(evt)" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="2.168" height="0.137"
viewBox="2.88 -22.355 2.168 0.137" overflow="visible" enable-background="new 2.88 -22.355 2.168 0.137" xml:space="preserve">
<script type="text/ecmascript">
<![CDATA[

var svgdoc;
var wahreworte;
var nochmehrwahreworte;
var mengewahreworte;

function init(evt)
{
svgdoc=evt.getTarget().getOwnerDocument();
}

function showlabel(evt,infotxt)
{
svgdoc.getElementById("info").setAttribute("style","visibility:visible");
svgdoc.getElementById("infotext").childNodes.item(0).setData(infotxt);
svgdoc.getElementById("infotext").setAttribute("style","visibility:visible");
}

function closelabel(evt)
{
svgdoc.getElementById("info").setAttribute("style","visibility:hidden");
svgdoc.getElementById("infotext").setAttribute("style","visibility:hidden");
}

function setcolor(evt,wert,wert1)
{
var wert;
var wert1;
var fall;
var bereich = evt.target;

if (wert== 0 && wert1== 0) {
bereich.setAttribute("fill","red");
}
if (wert== 0 && wert1== 1) {
fall=0;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 0 && wert1== 2) {
fall=1;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 0 && wert1== 3) {
fall=2;
bereich.setAttribute("fill","url(#dp"+fall+")");
}

if (wert== 1 && wert1== 0){
fall=10;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 1 && wert1== 1){
bereich.setAttribute("fill","pink");
}
if (wert== 1 && wert1== 2){
fall=3;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 1 && wert1== 3){
fall=4;
bereich.setAttribute("fill","url(#dp"+fall+")");
}

if (wert== 2 && wert1== 0){
fall=9;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 2 && wert1== 1){
fall=6;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 2 && wert1== 2){
bereich.setAttribute("fill","yellow");
}
if (wert== 2 && wert1== 3){
fall=5;
bereich.setAttribute("fill","url(#dp"+fall+")");
}


if (wert== 3 && wert1== 3){
bereich.setAttribute("fill","green");
}
if (wert== 3 && wert1== 2){
fall=7;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 3 && wert1== 1){
fall=8;
bereich.setAttribute("fill","url(#dp"+fall+")");
}
if (wert== 3 && wert1== 0){
fall=11;
bereich.setAttribute("fill","url(#dp"+fall+")");
}





if (wert== 99 && wert1== 99){
bereich.setAttribute("fill","#black");
}


}








]]>
</script>
<g id="layer1" transform="scale(0.415)">

<path id="_x38_246" onmouseover="showlabel(evt,'ON: 4103 / 1 TK: 16 // TI: 7');" onmouseout="closelabel(evt);" onload="setcolor(evt,99,99);" stroke="#333333" stroke-width="0.0017" d="
M1205.391,701.502l2.767,3.69l3.69,2.767l5.996,2.306l4.612,2.767l6.457,3.229l21.218,7.38l12.453,5.073l6.921,3.229l12.453,2.308
l12.453,0.925l2.306-4.156v-1.381l0.922-2.308l-0.459-0.92l1.381-0.461l1.384-0.464l-2.306-1.384v-0.92l3.231-2.308l1.384-2.306
l-0.922-0.461l-0.461-1.845l2.306-2.306l3.229,0.461l1.845-3.69l-2.765-1.384l0.92-0.922l1.384-0.922l-3.229-2.767l-12.455-5.535
l-1.845-2.306h-2.767l-1.845,0.922l-4.612,1.384l-6.914-1.384h-3.233h-1.384l-2.77,0.461l-7.38,0.922l0.461,0.922l-1.845,0.461
h-2.306l-1.384,1.845l0.461,1.384l-0.461,0.461l-5.996,0.922l-4.151,1.845l-3.231,1.845l-1.845,1.845l-3.692-1.845l-0.92-2.767
l-4.151-1.384l-2.306-1.845l-5.073-2.306l-2.306,0.461l-1.384-0.461l-3.69-2.306h-1.845l-1.845,1.845l-2.306-0.461
L1205.391,701.502"/>

<path id="_x39_257" onmouseover="showlabel(evt,'ON: 4120 / 1 TK: 6 // TI: 1');" onmouseout="closelabel(evt);" onload="setcolor(evt,99,99);" stroke="#333333" stroke-width="0.0017" d="
M1283.342,657.682l2.767,1.386h1.384l2.306,1.843l-0.461,0.927l1.384,1.84h1.845l2.306,0.461l2.308,2.767h3.69l2.767,0.922
l2.306,1.845h1.845v1.384h1.845l0.922,0.461h3.69l3.229-4.612l3.69-2.306l0.461-1.384l0.922-0.922v-2.306l2.306-0.922h1.384
l1.386-1.384l3.229,0.461l3.229-0.461l1.386-1.845l2.306-0.922l1.386-3.69l0.92-0.922l0,0l1.386-0.461h1.845l2.765-1.384
l-0.92-0.922l-1.845-0.461l-0.92-0.918l-3.231-3.233l-2.765-1.384l-1.386,0.922l-1.386,0.461l-0.92,0.922l-2.306-0.922
l-4.151,1.845l-0.92-0.922h-1.386l-3.69,1.384l-1.386,0.461l-3.692,1.384l-6.916,0.461l-1.386-0.461l-5.537,1.384l-0.92,0.922
v0.922l-2.772,1.384l-4.61,0.461h-5.537v0.922l-3.229,0.922L1283.342,657.682"/>


Hier gehts zum Orginal Eintrag "SVG in Html einbinden" im Forum
 
phpforum.de | Impressum