const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
return false;
return true;
复制 SVG 图像
通过使用对象填充 ClipboardItem 来复制 SVG 图片。包含 SVG 图片数据的 blob 是值，blob 的类型（在本例中为 'image/svg+xml'）是键。
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
粘贴 SVG 图像
如需粘贴 SVG 图片，请从剪贴板中读取 ClipboardItem，然后使用 getType() 方法获取所需类型（在本例中为 'image/svg+xml'）。此方法会返回一个 blob，该 blob 在转换为 blob 网址后，您可以将其分配给 <img> 的 src 属性。
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
image.src = blobURL;
SVG 是一种功能强大的格式，例如，它允许嵌入脚本。当用户粘贴来自未知来源的内容时，这可能会很危险，因此浏览器会运行清理步骤。复制数据时，Async Clipboard API 会生成格式正确的 SVG 文档，然后将其写入剪贴板。粘贴数据时，片段解析器会生成经过严格处理的 SVG 片段。因此，在粘贴操作之前，onclick 事件处理程序属性仍然存在，但在粘贴时，它们会被移除。
macOS 上的剪贴板查看器应用正在检查剪贴板内容。这表明 SVG 中的 onclick 事件监听器属性仍然存在。
在演示中探索复制和粘贴 SVG 的功能。查看源代码，了解其工作原理。请务必在复制和粘贴前后尝试点击任意圆圈。粘贴后，系统会移除可能存在危险的 onclick 事件处理程序属性。
使用此功能的正式版软件：
Boxy SVG
SVGcode
ChromeStatus 条目
Intent to Ship
Chromium bug
WebKit 标准位置
Mozilla 标准职位
Chromium 中针对 Async Clipboard API 的 SVG 支持由 Microsoft Edge 团队实现。此博文由 Rachel Andrew 和 Anupam Snigdha 审核。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2024-05-15。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2024-05-15。"],[],[],null,[]]
