javascript not working in embed svg file -
i start learning svg. got example code manipulating svg documents using ecmascript (javascript) , dom. change little:
<!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <script type="text/ecmascript"> <![cdata[ function changerectcolor(evt) { var red = math.round(math.random() * 255); evt.target.setattributens(null,"fill","rgb("+ red +","+ red+","+red+")"); } ]]> </script> <g id="firstgroup"> <rect id="mybluerect" width="100" height="50" x="40" y="20" fill="blue" onclick="changerectcolor(evt)"/> <text x="40" y="100">click on rectangle change it's color.</text> </g> </svg> </body> </html>
it works fine. move separated svg file, js code stop working:
<!doctype html> <html> <body> <object type="image/svg+xml" data="exampl3a.svg" /> <script type="text/ecmascript"> <![cdata[ function changerectcolor(evt) { var red = math.round(math.random() * 255); evt.target.setattributens(null,"fill","rgb("+ red +","+ red+","+red+")"); } ]]> </script> </body> </html>
svg file: exampl3a.svg
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <g id="firstgroup"> <rect id="mybluerect" width="100" height="50" x="40" y="20" fill="blue" onclick="changerectcolor(evt)"/> <text x="40" y="100">click on rectangle change it's color.</text> </g> </svg>
what should do?
thanks wes
if put svg different file, in document, , you'll need bind document, using getsvgdocument
. , yes, still not work in chrome local files (only website, or unless chrome run corresponding command-line switch).
svg:
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <g id="firstgroup"> <rect id="mybluerect" width="100" height="50" x="40" y="20" fill="blue" /> <text x="40" y="100">click on rectangle change it's color.</text> </g> </svg>
html
<!doctype html> <html> <body> <object id='mysvg' type="image/svg+xml" data="example3a.svg" /> <script type="text/ecmascript"> function changerectcolor(evt) { var red = math.round(math.random() * 255); evt.target.setattributens(null,"fill","rgb("+ red +","+ red+","+red+")"); } var obj = document.getelementbyid('mysvg'); obj.addeventlistener('load', function() { var svgdoc= obj.getsvgdocument(); var elem = svgdoc.getelementbyid("mybluerect"); elem.addeventlistener('click', changerectcolor); }); </script> </body> </html>
Comments
Post a Comment