html - Add onclick event to SVG element -
i found example in svg tutorial, explains how can use onclick event handler svg element. looks code below:
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![cdata[ function changerect(evt) { var svgobj=evt.target; svgstyle = svgobj.getstyle(); svgstyle.setproperty ('opacity', 0.3); svgobj.setattribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' /> </svg>
however doesn't seem work. nothing happens when click on element.
perhaps important mention fact displaying svg inside php script, using echo. content generated php script brought page using ajax and:
xmlhttprequest()
could perhaps have it? lot help.
it appears of javascript must included inside of svg run. unable reference external function, or libraries. meant code wass breaking @ svgstyle = svgobj.getstyle();
this attempting.
<?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"> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![cdata[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setattribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </svg>
Comments
Post a Comment