jQuery ".attr" Case-Problem

halskrause · 27.01.2012, 22:37

Ich lerne gerade SVG's zu erstellen, um diese als als Symbole auf Webseiten zu verwenden.

Ich würde auch gern diese etwas anmieren. Wie z.B. "Blur" bei MouseOver usw... verwenden. Jedoch lief mein erster Versuch schief.

Folgender Code:
(alternativ jsfiddle: http://jsfiddle.net/sveSL/2/)

PHP-Code:

  <html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('svg').hover(function(){$('.blurMe').attr('stdDeviation','2');})})
</script>
</head>
<body>
<div id="mysvg" style="width: 200px; height: 120px; background-color: red;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
          <feGaussianBlur class="blurMe" stdDeviation="0" result="blur"/>
        </filter>
      </defs>
      <rect x="1" y="1" width="198" height="118" fill="#2F4C84" />
      <g>
        <path filter="url(#MyFilter)" fill="none" stroke="#B7CCEF" stroke-width="5" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
        <text filter="url(#MyFilter)" fill="#B7CCEF"  font-size="45" font-family="Verdana" x="52" y="76">PHP</text>
      </g>
    </svg>
</div>
</body>
</html>

Das Problem ist, dass JQuery das Attribut 'stdDeviation' nicht ersetzt. Es fügt das gleiche Attribut nochmal in lowercase ein. Sprich 'stddeviation'. Hat irgendeiner eine Idee, wie man das umgehen kann?

rudygotya · 27.01.2012, 22:54

Hi,

für svgs würd ich dir raphaeljs ans Herz legen.

Falls doch per jQuery - verwende $.prop anstelle von attr. attr solltest du nur noch verwenden, um das html-attribut zu lesen. Was den DOM-Tree angeht, solltest du mit prop arbeiten.
Aus dem jQuery source:

PHP-Code:

      // All attributes are lowercase
    // Grab necessary hook if one is defined
    if (notxml) {
        name = name.toLowerCase();
        hooks = jQuery.attrHooks[name] || (rboolean.test(name) ? boolHook : nodeHook);
    }

siehe http://james.padolsey.com/jquery/#v=git&fn=jQuery.attr

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
id Problem PHP, jQuery Rechner Formular...	iDodder	PHP Einsteiger	5	19.01.2012 17:23
[Erledigt] CSS tooltip problem im IE img überlappt div	teewurst	HTML, Usability und Barrierefreiheit	11	11.04.2011 14:22
[Erledigt] jQuery draggable und click problem	BlackScorp	JavaScript, Ajax und mehr	5	09.02.2011 15:04
Zwei verschiedene jQuery Aktionen	Electrofreak	JavaScript, Ajax und mehr	3	14.01.2011 14:40
[Erledigt] if-else und switch	Micha72	PHP Tipps 2010	11	23.07.2010 11:50
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
[Erledigt] Datumsformat IMAP -> MySQL umwandeln - wie?	Namevac	PHP Tipps 2009	5	05.05.2009 13:36
Bilder an bestimmten Tagen anzeigen	Eclipse16V	PHP Tipps 2009	12	15.04.2009 15:28
[Erledigt] Transparente Runde Ecken bei Thumbnial realisieren	tomtaz	PHP Tipps 2008	3	08.07.2008 01:20
Problem und Frage zu Listenfeldauswertung ....	bp158	PHP Tipps 2006	2	10.07.2006 22:37
Sessions Problem Mehrseitiges Formular		PHP Tipps 2006	6	02.02.2006 18:59
Case optimieren?	c-f-g	PHP Tipps 2005-2	9	11.10.2005 12:33
problem mit switch und der 8 & 9	Calexico	PHP Tipps 2004-2	3	30.12.2004 11:00
Switch / Case Problem		PHP Tipps 2004	9	28.10.2004 11:18

27.01.2012, 22:37
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 757	jQuery ".attr" Case-Problem Ich lerne gerade SVG's zu erstellen, um diese als als Symbole auf Webseiten zu verwenden. Ich würde auch gern diese etwas anmieren. Wie z.B. "Blur" bei MouseOver usw... verwenden. Jedoch lief mein erster Versuch schief. Folgender Code: (alternativ jsfiddle: http://jsfiddle.net/sveSL/2/) PHP-Code: <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('svg').hover(function(){$('.blurMe').attr('stdDeviation','2');})}) </script> </head> <body> <div id="mysvg" style="width: 200px; height: 120px; background-color: red;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <feGaussianBlur class="blurMe" stdDeviation="0" result="blur"/> </filter> </defs> <rect x="1" y="1" width="198" height="118" fill="#2F4C84" /> <g> <path filter="url(#MyFilter)" fill="none" stroke="#B7CCEF" stroke-width="5" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <text filter="url(#MyFilter)" fill="#B7CCEF" font-size="45" font-family="Verdana" x="52" y="76">PHP</text> </g> </svg> </div> </body> </html> Das Problem ist, dass JQuery das Attribut 'stdDeviation' nicht ersetzt. Es fügt das gleiche Attribut nochmal in lowercase ein. Sprich 'stddeviation'. Hat irgendeiner eine Idee, wie man das umgehen kann?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.01.2012, 22:54
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 1.928 PHP-Kenntnisse: Fortgeschritten	Hi, für svgs würd ich dir raphaeljs ans Herz legen. Falls doch per jQuery - verwende $.prop anstelle von attr. attr solltest du nur noch verwenden, um das html-attribut zu lesen. Was den DOM-Tree angeht, solltest du mit prop arbeiten. Aus dem jQuery source: PHP-Code: `// All attributes are lowercase // Grab necessary hook if one is defined if (notxml) { name = name.toLowerCase(); hooks = jQuery.attrHooks[name] \|\| (rboolean.test(name) ? boolHook : nodeHook); }` siehe http://james.padolsey.com/jquery/#v=git&fn=jQuery.attr __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog