SVGGraphicsElement: paste event

The paste event is fired on an SVGGraphicsElement when the user has initiated a "paste" action through the browser's user interface.

Bubbles Yes
Cancelable Yes
Interface ClipboardEvent
Event handler property onpaste

If the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.

A handler for this event can access the clipboard contents by calling getData() on the event's clipboardData property.

To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventDefault(), and then insert its desired data manually.

It's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents.



<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 140 30" width="600" height="320" xmlns="">
    <foreignObject x="5" y="-10" width="90" height="20">
        <input xmlns="" value="Copy this text"/>
    <text x="5" y="30" id="element-to-paste-text" tabindex="1">Paste it here</text>


input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;


document.getElementById("element-to-paste-text").addEventListener("paste", evt => { = evt.clipboardData.getData("text/plain").toUpperCase();



Specification Status Comment
Scalable Vector Graphics (SVG) 2 Candidate Recommendation Definition that the clipboard events apply to SVG elements.
Clipboard API and events Working Draft Initial definition

See also