Avatar billede andreas13_fam Nybegynder
27. oktober 2009 - 21:33 Der er 7 kommentarer og
2 løsninger

IE problemer med SVG DOM

Hej jeg har en del problemer med IE når browseren (med Adobe SVG Viewer) skal afvikle javascript/ecmascript.

SVG filen ses her http://kortlink.dk/73xu
JS filen: http://netkogeren.a-mweb.dk/JS/SVG/title.js

Foreløbig ser det ud som om problemet opstår når jeg prøver at tilgå <svg> elementet, men der er sikkeret også andre fejl. Som jeg håber jeg kan få hjælp til.
Avatar billede tjens Nybegynder
28. oktober 2009 - 10:47 #1
Da <svg> elementet samtidig er XML-filens rod-element prøvede jeg at ændre linien til:
this.document.documentElement.appendChild(filter);
Det hjalp på IE (og virker også i andre browsere), men desværre kommer der så bare andre fejl længere ned i scriptet.

Jeg har lidt svært ved at forstå hvad dit script laver i starten, hvor der jongleres med f.eks. document og title variable.

Har du mulighed for at give nogle af disse variable andre navne, så de ikke er magen til de normale HTML-dom navne?
Eller forklare nærmere hvad der sker i starten af scriptet?
Avatar billede andreas13_fam Nybegynder
28. oktober 2009 - 15:46 #2
Ja fandt også lige ud af det ;)
Har tilføjet lidt kommentar til javascript koden.
Men det går mest ud på at oprette en skygge effekt.

Men den fejl der opstår, er vist fordi hele dokumentet ikke er indlæst. Hvordan jeg forhindre det ved jeg ikke, efter som jeg i forvejen starter koden med onload og har javascript koden nederst.
Avatar billede tjens Nybegynder
28. oktober 2009 - 23:35 #3
Det jeg ikke kunne finde rundt i, var nu alt den indledende gynmastik i startup og det objektorienterede som f.eks. window.title = function, og så videre.

Det har jeg slettet helt i en ny testversion:
http://tjens.dk/eksperten/890896/Test03.svg
og det virker stadig i FF, Chrome og Opera

Men desværre sidder jeg helt fast i IE, da de ting den returnerer på getElementsByTagName, ikke er rigtig DOM nodes med de sædvanlinge metoder og attributter.

Jeg ved desværre ikke hvordan du kommer videre.
Avatar billede andreas13_fam Nybegynder
29. oktober 2009 - 08:07 #4
den startup gymnastik som du omtaler er kun fordi at diagrammet er serverside udregnet. Og så er det mest praktik at jeg laver en tasklist i bunden, i tilfælde af jeg vil tilføje andre scripts.

Men sådan som jeg ser det, retunere getElementsByTagName('title') nu elementer. Det er derimod parentNode til de elementer den ikke kan finde.

Min teori er at det er fordi at den ikke har indlæst hele domtræet.
Så jeg vil lige prøve med http://code.google.com/p/domready/ eller window.onload

PS: måske du kan få hjælp her, det har jeg forsøgt
http://www.mecxpert.de/svg/tooltips.html
Avatar billede andreas13_fam Nybegynder
29. oktober 2009 - 20:51 #5
Så fik jeg skidtet til at virke: http://netkogeren.a-mweb.dk/opskrift/vis/20

Tricket var at afvikle:
element.setAttribute("onmouseover", "window.title.showTitle(this,evt,'"+ title +"');");
element.setAttribute("onmouseout","window.title.hideTitle(this,evt);");
element.setAttribute("onmousemove","window.title.updateTitle(this,evt);");
serverside. Og hvor title så var angivet via en ekstra parameter.

Desuden kan man ikke tilgå elementer via getElementsByTagName.
Man skal derimod tilgå dem, ved at gemme en global variabel der henviser til elementet.

var filter = this.document.createElementNS('http://www.w3.org/2000/svg',"filter");
this.document.documentElement.appendChild(filter);
window.variabelTilAtTilgaaFilter = filter;
Avatar billede andreas13_fam Nybegynder
31. oktober 2009 - 17:17 #6
Skal vi delle pointne ?
Avatar billede tjens Nybegynder
01. november 2009 - 10:56 #7
Jo tak.

Konklusionen er vel så, at MSIE overgiver ansvaret til Plugin'en, og dermed ikke selv fortolker det, inden for svg-tags, som et DOM-træ?
Avatar billede andreas13_fam Nybegynder
14. november 2009 - 22:13 #8
Nu husker jeg faktisk at Pluginet bruger en tideligere version af den JavaScript motor der sidder i FireFox.

Men nu fandt jeg enlig ud af hvad problemet var, her til aften. De vigtigste ting er markeret med fed:


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">[/b]
<svg
    version="1.1"
    width="400" height="400"
    a3:scriptImplementation="Adobe" onload="cache_objets(evt);" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"[/b]
    xmlns:xlink="http://www.w3.org/1999/xlink"[/b]
    xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"[/b]>
    <script a3:scriptImplementation="Adobe" type="text/ecmascript">
        <![CDATA[
        var change = false;
       
        function cache_objets(evt)
        {
            var svgdoc = evt.target.ownerDocument;
            var rect = svgdoc.getElementsByTagName("rect");
            for (var i=0;i<rect.length;i++)
            {
                var objet = rect.item(i);

                if (rect.item(i).getAttribute("style").match(/fill: ?blue/gi)) {
                    objet.style.setProperty("visibility","hidden",'');
                }

                if (change === true) {
                    objet.style.setProperty("visibility","visible",'');
                }
            }
            change = (change === false ? true : false);
        }
        ]]>
    </script>
    <rect x="50" y="50" width="100" height="50" style="fill:lightgreen" onclick="cache_objets(evt)" />
    <text x="60" y="80" style="font-size:15px;text-anchor:start;">Click!</text>

    <g>
        <rect x="155" y="155" width="100" height="50" style="fill:blue"/>
        <rect x="170" y="170" width="100" height="50" style="fill:yellow"/>
        <rect x="185" y="185" width="100" height="50" style="fill:red"/>
        <rect x="200" y="200" width="100" height="50" style="fill:blue"/>
        <rect x="215" y="215" width="100" height="50" style="fill:yellow"/>
        <rect x="230" y="230" width="100" height="50" style="fill:red"/>
    </g>
</svg>
Avatar billede andreas13_fam Nybegynder
14. november 2009 - 22:22 #9
Nå ja, alt fed :?
Når man bruger getElementsByTagName('element')
og gerne vil have fat i fx den føste skal man bruge item
getElementsByTagName('element').item(0)


Når man vil tjekke style skal man bruge match sådan:
element.getAttribute("style").match(/fill: ?blue/gi)

Husk ?'tegnet foran mellemrummet.

Husk at have dette med i <svg> elementet:


og dette i script elementet:

<script a3:scriptImplementation="Adobe" type="text/ecmascript">
<![CDATA[

]]>
</script>


Husk også at for at tilgå dokumentet skal man gøre det via event:

var svgdoc = evt.target.ownerDocument;
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester