{"id":1035,"date":"2014-07-11T13:53:34","date_gmt":"2014-07-11T11:53:34","guid":{"rendered":"http:\/\/blog.kolatzek.org\/wblog\/?p=1035"},"modified":"2016-04-11T00:01:57","modified_gmt":"2016-04-10T22:01:57","slug":"saarlk-svg-mit-jquery-interaktiv-gestalten-auf-beispiel-der-saarlaendischen-landkreise","status":"publish","type":"post","link":"https:\/\/blog.kolatzek.org\/wblog\/1035\/saarlk-svg-mit-jquery-interaktiv-gestalten-auf-beispiel-der-saarlaendischen-landkreise","title":{"rendered":"Aus Langeweile: SVG mit jQuery interaktiv gestalten am Beispiel der saarl\u00e4ndischen Landkreise"},"content":{"rendered":"

Man muss sich immer weiter entwickeln. Und wann soll man denn mit liegen gebliebenen Sachen experimentieren, wenn nicht in der Freizeit? Die Tatsache, dass SVG endlich in allen Browsern verf\u00fcgbar ist und laut caiuse.com fast von 90% aller Web-User genutzt werden kann, ist sehr erfreulich. Es war mir schon immer ein Graus, „schwere“ statische Grafikdateien herstellen bzw. herunterladen zu m\u00fcssen, die mit einer leichtgewichtigen Vektorgrafik doch ersetzt und\u00a0 interaktiv gestaltet werden k\u00f6nnen. Was dabei entstanden ist, findet man hier und auf github<\/a>.<\/p>\n

<\/p>\n

SVG als XML-basierte Vektorgrafik hat viele Vorteile. Vor allem die direkte Einbettung ins HTML und die vergleichbaren Gestaltungsm\u00f6glichkeiten wie das HTML. Man kann JavaScript daf\u00fcr einspannen und einzelne Element nach Belieben umgestalten. Je nach Browser werden einige „Zauber“ (wie Filter und Effekte) noch nicht unterst\u00fctzt aber schon die Basisfunktionen sind „der Rede wert“.<\/p>\n

Als Erstes muss man eine SVG-Grafik selber erstellen<\/a> oder finden<\/a>. In meinem Fall war es Wikimedia<\/a>. An dieser Stelle vielen Dank an Lantus<\/a> – den Autor der Datei (wenn auch wahrscheinlich nur „Umwandler“ anderer Daten).<\/p>\n

Dann bearbeitet man sie so, dass unn\u00f6tige Pfade entfernt werden. Andere (wenn n\u00f6tig gruppiert) versieht man mit IDs, die man sp\u00e4ter ansprechen will.<\/p>\n

Die fertige Datei kopiert man entweder als Text direkt ins HTML einer Seite, bindet als Link ein oder packt wie ich als String in ein jQuery-Plugin, um es mehrfach in verschiedenen Bereichen verwenden zu k\u00f6nnen. Alles zusammen sieht dann in etwa so aus:<\/p>\n

http:\/\/jsfiddle.net\/RobertKolatzek\/dqJd6\/<\/a><\/p>\n

Der Trick mit dem SVG-String im JS war n\u00f6tig, um alles zusammen zu halten und nicht auch externe Quellen verweisen zu m\u00fcssen. Mit dem Einbinden des Plugins haben es die Webmaster alles, was sie brauchen. Dann kommt nur noch die Einhaltung einer bestimmten Konvention, die mit der Morphologie eines jQuery-Plugins in Verbindung steht. Hier das Beispiel aus dem Fiddle:<\/p>\n

\r\n$('div').SaarLK({'fill': '#22DD88'});\r\n$('div.SaarLK.1').data('SaarLK').hov(['SLS', 'MZG']);\r\n$('div.SaarLK.2').data('SaarLK').hov('HOM', {'fill': '#dd9933', stroke: '#dd4422', \"stroke-width\": 5});\r\n$('section').SaarLK();\r\n$('section.SaarLK.1').data('SaarLK').hov('SB');\r\n<\/code><\/pre>\n
Zeile 1 reichert mit der Methode „SaarLK“ alle\u00a0 DIVs um die SVG-Grafik an. Dabei wird schon f\u00fcr alle festgelegt, dass die F\u00fcllfarbe (im SVG-Jargon „fill“ und nicht „background-color“ wie im CSS genannt) komisch-gr\u00fcn (‚#22DD88‘ sein soll).<\/p>\n
In Zeile 2 werden die Landkreise (2 St\u00fcck als Array) „SLS“ und „MZG“ (immer brav nach Autokennzeichen!) hervorgehoben werden. Das geschieht mit der Methode „hov“. Diese Methode kann man nicht direkt auf ein Element loslassen. (Ich habe noch keine L\u00f6sung daf\u00fcr gefunden). Deshalb wird das bei der Initialisierung („SaarLK“) erstellte Objekt mit Hilfe von „data(‚SaarLK‘)“ hervorgeholt. Wenn die Initialisierung nicht auf eine ID (ein konkretes Element) ging, muss man sich entscheiden welches Element aus der initialen Auswahl gemeint ist. Dazu gibt es von mir eine Hilfestellung. Jedes von SaarLK initialisierte Element bekommt die Klasse SaarLK und die nummerische Klasse, die der Reihenfolge der Elemente bei der Initialisierung entspricht: Der erste DIV aus der ersten Initialisierung wird also die Klassen „SaarLK“ und „1“ besitzen. Der Zweite „SaarLK“ und „2“.<\/p>\n
In Zeile 3 wird nur ein Landkreis hervorgehoben, daf\u00fcr aber mit eigenen SVG-style-Regeln, die man in einem Objektliteral – wie bei jQuery \u00fcblich – \u00fcbergibt.<\/p>\n
In Zeile 4 wird erneut eine Auswahl (diesmal „SECTION“) getroffen. Es werden die Voreinstellungen des Plugins \u00fcbernommen.<\/p>\n
In Zeile 5 wird die gerade getroffene neue Auswahl (das erste SECTION-Element – also „section.SaarLK.1“ [es wurde ja bei der Auswahl von neuem gez\u00e4hlt]) benutzt, um darin den Regionalverband (Kennzeichen „SB“) mit den Vorgabewerten des Plugins zu markieren.<\/p>\n
Das SVG passt sich immer dem Element an, in dem es sich befindet. Das funktioniert mit Hilfe von bestimmten Attributen im SVG. Wie das genau geht, sieht man in diesem Beitrag<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Man muss sich immer weiter entwickeln. Und wann soll man denn mit liegen gebliebenen Sachen experimentieren, wenn nicht in der Freizeit? Die Tatsache, dass SVG endlich in allen Browsern verf\u00fcgbar ist und laut caiuse.com fast von 90% aller Web-User genutzt werden kann, ist sehr erfreulich. Es war mir schon immer ein Graus, „schwere“ statische Grafikdateien […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[55,143,144,145,142],"class_list":["post-1035","post","type-post","status-publish","format-standard","hentry","category-software","tag-javascript","tag-jquery","tag-responsiv","tag-saarand","tag-svg","entry"],"_links":{"self":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":7,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1035\/revisions"}],"predecessor-version":[{"id":1070,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/1035\/revisions\/1070"}],"wp:attachment":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/media?parent=1035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/categories?post=1035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/tags?post=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}