StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>Update July 2016</h3> <p>It is possible to respond to events from <code>embed</code> elements now, under the condition that you embed something from the same domain. I have created a quick demonstration of this as a <strong><a href="https://jsfiddle.net/cu5hsdzz/" rel="nofollow noreferrer">JSFiddle</a></strong>. The most important part is that it is possible to access the embedded document through <code>embeddingElement.<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/contentDocument" rel="nofollow noreferrer">contentDocument</a></code>. From there, the SVG element can be accessed and click event handlers can be installed.</p> <p>Implementation note: in the demo, I add event handlers to all <code>path</code> elements. For performance reasons, you would probably want to add a single event handler to the SVG and then use the event target in the handler. Edit: like in this <strong><a href="https://jsfiddle.net/cu5hsdzz/1/" rel="nofollow noreferrer">updated Fiddle</a></strong>.</p> <h3>Old answer</h3> <p>A quick Google search brought me <a href="https://stackoverflow.com/questions/3156303/how-to-add-javascript-onclick-handler-to-an-embedded-html-object">here</a>. I think that's the answer to your problem, right?</p> <p>To summarize here: it is not possible to capture events on an <code>embed</code> element, unfortunately the only solution is modifying the SVG file.</p> <p>Here is a small example of how to embed JavaScript into an SVG file (<strong><a href="https://jsfiddle.net/ey9gyey7/" rel="nofollow noreferrer">JSFiddle</a></strong>). It is based on an <a href="http://web.archive.org/web/20121023190528/http://www.ibm.com/developerworks/library/x-svgint/#N10143" rel="nofollow noreferrer">example</a> from IBM developerWorks.</p> <pre><code><svg> <script type="text/javascript"> <![CDATA[ var redVal = 0; var greenVal = 0; var blueVal = 0; function changeCol(evt) { redVal = Math.round(Math.random() * 255); greenVal = Math.round(Math.random() * 255); blueVal = Math.round(Math.random() * 255); evt.target.setAttribute("fill", "rgb(" + redVal + "," + greenVal + "," + blueVal + ")"); } // ]]> </script> <circle cx="200" cy="200" r="100" fill="blue" onclick="changeCol(evt)" /> </svg> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload