Referenz auf "SVG in HTML einbinden" (HTML Forum)

[Keene]

So hab da kleines Problemchen mein Code sieht derzeit so aus

<svg:svg contentScriptType="text/ecmascript" width="1024.0px" xmlns:xlink="http://www.w3.org/1999/xlink"
     baseProfile="full" zoomAndPan="magnify" contentStyleType="text/css" height="768.0px"
     preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
     <svg:path fill="none" filter="none" stroke="#000000"/>
     <svg:image x="0.0" y="0.0" width="800" xlink:href="file:/D:/gwa2000/runtime/www.3V4025/images/abteil.gif"
           height="600" preserveAspectRatio="none"/>
           <svg:polyline fill="none" stroke-width="3" points="35.0,195.0 37.384613,175.0 39.76923,195.0          42.153847,175.0 44.538464,195.0 46.923077,175.0 49.307693,195.0 51.69231,175.0          54.076923,195.0 56.46154,175.0 58.846153,195.0 61.23077,175.0 63.615387,187.0 66.0,187.0" stroke="#000000"/>
           <svg:line fill="none" x1="66.0" x2="717.5" y1="187.0" y2="187.0" stroke="#000000" stroke-width="3"/>
           <svg:rect fill="#33ff00" x="387.75" width="11.5" height="11.5" y="27.75" stroke="#00ffff"/>
           <svg:line stroke-linecap="round" fill="none" x1="394.0" x2="490.0" y1="33.25" y2="58.25" stroke="#66ff00"
          stroke-width="3"/>
          <svg:line  id="klpli" stroke-linecap="round" transform="matrix(1.0 0.0 0.0 -1.0 0.0 93.0)" fill="none" x1="295"
          x2="393.0" y1="35" y2="60" stroke="#66ff00" stroke-width="3"
          onmouseover="setAtt('#klpli', 'y1', '60')"
          onmouseout="setAtt('#klpli', 'y1', '60')"/>
              <script type="text/javascript">
     function test() {
     tname = document.getElementById["klpli"];
     alert(tname);
}
</script>
          <input id="input01" style="Z-INDEX: 103; LEFT: 179; WIDTH: 114px; POSITION: absolute; TOP: 321; HEIGHT: 38px" type="button" value="&Uuml;bersicht" onclick="test();">
<svg:/svg>

so wenn ich den button anklicke sagt er mir die ID seie undefiniert...aber warum??? im SVG is die Linie eindeutig mit der ID gekennzeichnet wieso findet er sie dann nich?

 

[Frank]

falsch

document.getElementById["klpli"]

richtig

document.getElementById("klpli")

 

[Keene]

ok das prüfen hat geklappt danke für hilfe nun will ich ja eigentlich das wenn ich den Button drücke sich im svg die linie ändert aber er sagt mir immer

target.setAttribute(name, value);

das er das Objekt die EIgenschaft oder die Methode nich unterstützt?! so sieht derzeit meine funktion aus

function setAtt(evt, Name, value) {
tname = document.getElementById("klpli");
alert(tname);
var target = evt.gettarget();
target.setAttribute(name, value);

der Button

 <input id="input01" style="Z-INDEX: 103; LEFT: 179; WIDTH: 114px; POSITION: absolute; TOP: 321; HEIGHT: 38px" type="button" value="&Uuml;bersicht" onclick="setAtt('klpli', 'y1', '120');">

und die linie

<svg:line  id="klpli" stroke-linecap="round" transform="matrix(1.0 0.0 0.0 -1.0 0.0 93.0)" fill="none" x1="295"
          x2="393.0" y1="35" y2="60" stroke="#66ff00" stroke-width="3"
          onmouseover="setAtt('klpli', 'y1', '60')"
          onmouseout="setAtt('klpli', 'y1', '60')"/>

Sollte ich es villeicht mit ner anderen function probieren oder muss ich bei der linie noch was beifügen?

mfg Keene

 

[Frank]

ich hab den Code bei mir mal ausgeführt. folgende Fehler

Fehler: missing } after function body
Quelldatei: http://localhost/test.html
Zeile: 9, Spalte: 3
Quelltext:
-->
----------------------------------------
Fehler: setAtt is not defined
Quelldatei: http://localhost/test.html
Zeile: 1

Habe es korrigiert und bekomme nun beim ausführen ein alertfenster

[ObjectHTMLUnknownElement]

und dass liegt daran:

Fehler: evt.gettarget is not a function
Quelldatei: http://localhost/test.html
Zeile: 6