Difference between revisions of "Canyon Map/Test"
From B.E.R.T. Wiki
| Line 2: | Line 2: | ||
a test to see if we can get dynamic SVG to execute in a page. | a test to see if we can get dynamic SVG to execute in a page. | ||
| + | |||
| + | <html> | ||
| + | <head> | ||
| + | <script> | ||
| + | |||
| + | function pointAtMe(e) { | ||
| + | var svg = document.getElementById("arrow"); | ||
| + | svg.style.display = "block"; | ||
| + | svg.style.position = "absolute"; | ||
| + | svg.style.top = (e.target.offsetTop - 40) + "px"; | ||
| + | svg.style.left = (e.target.offsetLeft - 110) + "px"; | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | <style> | ||
| + | OBJECT { position: absolute; display: none } /* hide initially */ | ||
| + | BUTTON { display: block; margin: 100 auto } | ||
| + | </style> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | |||
| + | <object id="arrow" width="100px" height="100px"> | ||
| + | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100" width="100%" height="100%"> | ||
| + | <path stroke="#000000" id="Arrow" d="m2.749992,2.750002l106.118515,0l88.431496,47.250097l-88.431496,47.249901l-106.118515,0l0,-94.499998z" stroke-width="3"/> | ||
| + | </svg> | ||
| + | </object> | ||
| + | |||
| + | <div> | ||
| + | <button onclick="pointAtMe(event)">Button 1</button> | ||
| + | <button onclick="pointAtMe(event)">Button 2</button> | ||
| + | </div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
Revision as of 10:26, 29 June 2018
a test to see if we can get dynamic SVG to execute in a page.