 [SVG][JS] Jak odświeżyć podgląd pliku? |
  |
| [SVG][JS] Jak odświeżyć podgląd pliku? |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 37 Pomógł: 0 Dołączył: 5.01.2009 Ostrzeżenie: (0%) 
 |
Witam.
Mam taki problem: Dodaję do definicji path w defs taki kod JS:
Lecz po najechaniu myszą nic się nie dzieje. W Google Chrome zmiany widać dopiero gdy przez podgląd źródła kliknę na obiekt którego zmiana dotyczyła a w FF w ogóle nie widać zmiany. Ktoś wie jak odświeżyć wygląd używając JS'a? Z góry dziękuję za odpowiedź i pozdrawiam tlaguz |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 31 Pomógł: 1 Dołączył: 29.10.2009 Ostrzeżenie: (0%)
|
Witam proponuje ci zajrzeć na stronę raphaeljs.com jest to biblioteka JS właśnie do obsługi SVG i to co teraz chcesz zrobić zajmie ci naprawdę chwilką na stronie głównej są przykłady pozdrawiam
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%)
|
Cytat(tlaguz @ 1.02.2010, 21:45:50 )  W Google Chrome zmiany widać dopiero gdy przez podgląd źródła kliknę na obiekt którego zmiana dotyczyła a w FF w ogóle nie widać zmiany. co to wogóle za metoda correspondingElement o.O wejdź operą lub mozillą z firebugiem (po to żeby przeedytować szybko źródło strony - gdyż nie będę tu emulował odpowiednich nagłówków ;p) na stronę: https://developer.mozilla.org/presentations...vas/SVGDemo.xml, w operze kliknij źródło i podmienisz całe, w firebugu daj podgląd i podmień body - i źródło poniżej (najedź myszką na ten duuuży biały "trójkąt") - poszukaj u siebie błędów (IMG:style_emoticons/default/winksmiley.jpg) : Kod <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>XTech SVG Demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } #ff{fill:white;stroke:red;stroke-width:4;} body.invalid #err { display:inline; } </style> <script> function signalError() { document.getElementById('body'). setAttribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>HTML Form</legend> <p><label>Enter something:</label> <input type="text"/> <span id="err">Incorrect value!</span></p> <p><button onclick="signalError();">Activate!</button></p> </fieldset> </form> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <linearGradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient);" /> <path id="ff" d="M25,15L15,35 35,35 Z"/> <path d="M50,80 L90,100 75,35 Z" style="fill: white;" onmouseover="this.setAttribute('style','fill: #FF0000;');"/> </svg> </body> </html> |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 37 Pomógł: 0 Dołączył: 5.01.2009 Ostrzeżenie: (0%)
|
Dzięki za odpowiedzi.
No więc tak. W FF działa mi coś takiego: Kod <path d="M588.87 837.70l 3.89 1.04 4.18-22.73 6.27-22.66 11.37-26.52 15.56-36.63 10.01-24.21-4.57-1.08-11.50 25.14-13.97 35.79-7.11 16.66-4.01 9.74-6.22 26.85-3.91 18.62" fill="#00FF00" onmouseover="this.setAttribute('fill', '#FF0000');"/> Niestety Chrome zwraca mi taki błąd: Uncaught TypeError: Object #<an SVGElementInstance> has no method 'setAttribute' Nie wiem o co chodzi, ale DOM tego obiektu pod Chromem jest zupełnie inny niż pod FF (sprawdziłem this wskazuje na obiekt o takiej samej nazwie: SVGPathElement) Wie ktoś może co robię źle? Z góry dziękuję za odpowiedź i pozdrawiam tlaguz |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%)
|
chrome nie mam - w necie w większości przykładów użyta jest metoda .setAttributeNS() - a dokłądniej konstrukcja z pustym namspase czyli w stylu:
.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")"); zresztą pierwsze lepsze przykłady: http://www.carto.net/svg/manipulating_svg_...dom_ecmascript/ - więcej poszukaj w necie (nie wiem czy to działa w chrome ;p - bo nie mam chrome (IMG:style_emoticons/default/winksmiley.jpg) ) |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 37 Pomógł: 0 Dołączył: 5.01.2009 Ostrzeżenie: (0%)
|
Strona którą podałeś działa pod Chrome, ale gdy próbuję zastosować tą metodę do path, albo use otrzymuję:
Cannot call method 'setAttributeNS' of undefined A warto dodać, że pod FF i Operą wszystko działa :/ |
|
|
|
|
|
Aktualny czas: 17.09.2025 - 19:38 |
