{"id":956,"date":"2011-02-23T10:55:39","date_gmt":"2011-02-23T08:55:39","guid":{"rendered":"http:\/\/sickel.net\/blogg\/?p=956"},"modified":"2011-05-05T21:06:45","modified_gmt":"2011-05-05T19:06:45","slug":"svg-and-html","status":"publish","type":"post","link":"https:\/\/sickel.net\/blogg\/?p=956","title":{"rendered":"svg and html"},"content":{"rendered":"

Using an uptodate browser (or a java script library, such as svgweb<\/a>) it is fairly easy to integrate a svg file into a html page and to handle the svg-file from html, for a primer, see e.g. alistapart.com<\/a>. Basically, when you have the svg in your page, you use
\n
\nsvgobject.contentDocument.getElementById( ... );
\n<\/code>
\nwhere svgobjectg is the <object> that embeds the svg, contentDocument takes you to the svg-file itself, and using getElementById or other dom-functions, you can access all elements of the svg, manipulating them to your heart’s desire. I am using it in an own application for adding live data to a stripchart<\/a>.<\/p>\n

However, it was not so easy to find out how to go the other way. In the stripchart application above, I have set an onclick-handler within the svg. It draws a horizontal line where the click was, then a timed updater in the html inspects the svg, finds that the line is visible,
\n
\nif (svgobject.contentDocument.getElementById('markerline').stroke==\"black\"){
\n doSomething();
\n}
\n<\/code>
\nand does an action (in my case, reads out the value of the stripchart at the location of the line).<\/p>\n

All fine and dandy, as long as you do not mind waiting till the updater fires.<\/p>\n

As long as we have access to all parts of the svg from javascript in the html-document, the obious way of fixing this should be to put an eventhandler “into” the svg from the html’s javascript – eg
\n
\nsvgobject.contentDocument..getElementById('area').addEventListener('click',function(event){alert('change');});
\n<\/code>
\nThis works! – but only in the Google chrome browser.<\/p>\n

Doing a lot of head scratching and googling, at last I found a page on svg scripting in the MDC doc centre<\/a>. It turned out that I have the object parent<\/i> for my use that points ‘out’ from the svg. So if I put a
\n
\n<rect x=\"-30\" y=\"0\" width=\"260\" height=\"400\" stroke-width=\"2\" fill=\"lightgray\" onclick=\"parent.test()\" \/>
\n<\/code>
\ninto my svg, it calls the test() function in the html’s javascript.<\/p>\n

Tested in Firefox 3.6.13, opera 11.01, chrome 9.0.597.98 and Internet Explorer 8.0.6001 – the latter armed with svgweb 2011-02-03 “Lurker Above”.<\/p>\n

No more time for blogging now, off to do some real work!<\/p>\n","protected":false},"excerpt":{"rendered":"

Using an uptodate browser (or a java script library, such as svgweb) it is fairly easy to integrate a svg file into a html page and to handle the svg-file from html, for a primer, see e.g. alistapart.com. Basically, when … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1,26,24],"tags":[],"class_list":["post-956","post","type-post","status-publish","format-standard","hentry","category-div","category-html","category-svg"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pnVtD-fq","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=956"}],"version-history":[{"count":8,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions"}],"predecessor-version":[{"id":964,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions\/964"}],"wp:attachment":[{"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickel.net\/blogg\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}