nicht angemeldet
HTML5 + XML + JS, Wald Bäume
0 0 
Matthias Apsel
HTML5 + XML + JS, Wald Bäume
Hallo
Folgender Testcase funktioniert wunderbar
(keine Scriptausführung)
<!DOCTYPE html>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Planer-Test</title>
<link rel="stylesheet" type="text/css" href="mobaplaner.css" />
</head>
<body>
<section id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
<rect x="10" y="10" width="100" height="100" fill="red"></rect>
</svg>
</section>
</body>
</html>
Der Fall mit JS generiertem SVG aber versagt
- beim rect-Element (wird nicht angezeigt)
der fragliche Script-Auszug
_CP.svg=createEl('svg',{
'xmlns':_V.svgNS,
version:"1.1",
id:'svg'+_V.CP,
width:_CP.canvas.x+"px",
height:_CP.canvas.y+"px",
style:"width:"+_CP.canvas.x+"px;height:"+_CP.canvas.y+"px",
}
);
_CP.svg.appendChild(
createEl('rect',{
x:"10", y:"10", width:"100", height:"100", fill:'red'
})
);
_R.canvas.appendChild(_CP.svg);
Die Elemente und Attribute werden alle im DOM erzeugt.
createEl() sieht so aus:
function createEl(el,attr){
var e = document.createElement(el);
if(attr) for(var i in attr){ e.setAttribute(i, attr[i]); }
return e;
}
Vielleicht sieht jemand den Wald, oder die Bäume...
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
Hi,
du brauchst document.createElementNS.
Sonst weiß der Browser nicht was svg sein soll.
na schön:
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">und folgend:
_CP.svg=document.createElementNS(_V.svgNS,'svg:svg'); _CP.svg.setAttributeNS(_V.svgNS,'version',"1.1"); _CP.svg.setAttributeNS(_V.svgNS,'id','svg'+_V.CP); _CP.svg.setAttributeNS(_V.svgNS,'width',_CP.canvas.x); _CP.svg.setAttributeNS(_V.svgNS,'height',_CP.canvas.y); var r=document.createElementNS(_V.svgNS,'svg:rect'); r.setAttributeNS(_V.svgNS,'x',10); r.setAttributeNS(_V.svgNS,'y',10); r.setAttributeNS(_V.svgNS,'width',100); r.setAttributeNS(_V.svgNS,'height',100); r.setAttributeNS(_V.svgNS,'fill','red'); _CP.svg.appendChild(r);Elemente werden in den DOM eingehängt.
aber svg wird in zufälliger Breite und Höhe dargestellt
rect wird gar nicht angezeigt.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi,
mit .setAttribute anstelle von .setAttributeNS (bzw. direkt element.[ATTRIBUTE] funktionierts zumindest bei mir im Chrome.
Verwirrt mich jetzt aber auch.
~dave
-
mit .setAttribute anstelle von .setAttributeNS (bzw. direkt element.[ATTRIBUTE] funktionierts zumindest bei mir im Chrome.
Verwirrt mich jetzt aber auch.
Ja danke. .setAttributeNS war zuviel des guten.
Ist aber auch verwirrend.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-
Die Elemente und Attribute werden alle im DOM erzeugt.
Dann solltest du doch auch ermitteln können, welche Eigenschaften das fragliche Element erhalten hat.
Matthias
--
1/z ist kein Blatt Papier.
