在 IE 和 Edge 上拖动 svg 元素的精灵

Posted

技术标签:

【中文标题】在 IE 和 Edge 上拖动 svg 元素的精灵【英文标题】:Drag sprite for svg elements on IE and Edge 【发布时间】:2017-01-10 00:11:15 【问题描述】:

有没有办法在 IE/Edge 中显示 svg 元素的拖动精灵?

例子:

这个可以拖动没有问题

<img draggable="true" src="file.jpg" />

这个没有显示拖动精灵

<img draggable="true" src="file.svg" />

演示: http://codepen.io/akotb/pen/WGNOXv

如果您拖动的 div 有一个使用 svg 符号的直接​​(或间接)子级,它也不起作用

<div draggable="true"> <svg><use xlink:href="#circle" /></svg></div>

也使用该示例更新了演示

【问题讨论】:

你的第一个带有 svg 背景的 div 可以工作...有什么问题? 我需要让它与svgs一起工作,我所有的资产都是svgs。如果svg图像是拖动元素的子元素,它也不起作用 【参考方案1】:

我给你一个建议,让你的 SVG 工作,但我建议你也阅读以下文档:

假设这是你的 html 部分

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="http://demosthenes.info/assets/images/thumbnails/homer-simpson.svg" draggable="true"
ondragstart="drag(event)"  >

这是你的 CSS 样式

img 
  width: 150px;
  height: 150px;


#div1, #div2 
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;

我们可能还会添加一些 javascript 代码,以便更容易处理跨浏览器兼容性

function allowDrop(ev) 
    ev.preventDefault();


function drag(ev) 
    ev.dataTransfer.setData("text", ev.target.id);


function drop(ev) 
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));

我们可以一起做这个http://codepen.io/mhadaily/pen/QKjgAo

更多文档:

1-Cross Browser HTML5 Drag and Drop

2-Using HTML5’s Native Drag and Drop API

3-HTML 5 drag and drop API

更新:

由于 IE 要让它与 SVG 可拖动一起工作有点棘手,我用另一个适用于 IE8+ 和触摸屏的解决方案更新了这篇文章。可以提供帮助的轻量级库之一是interact.js。这是解决方案https://jsfiddle.net/mhadaily/pkewdttr/,您可以看到它在 IE8+ 和其他浏览器中运行非常流畅。请查看interactjs.io 网站以获取更多文档。

如果您需要更多帮助,请咨询我。

【讨论】:

是的,经过测试,完美运行,Edge:s14.postimg.io/9ptpz5ttt/… 和 IE11:s14.postimg.io/gubj87135/… 如上图所示,SVG 图像在我拖到那里的框内。 这在 IE 11 中不起作用(或者您没有理解问题。再次检查)。 是的,这不起作用(或回答不同的问题) 就像我说的那样,我的意思是给你一个例子来展示,如果你想支持 SVG 元素的拖放,你需要进行手动点击测试。有兴趣的可以看看drag-drop.dart。这是我的一个库,支持跨浏览器拖放 SVG。这是链接github.com/danschultz/drag-drop.dart,如果有帮助请告诉我。由于 IE 不支持 HTML5 拖放,因此没有其他方法,因此支持跨浏览器的库将在这种情况下提供帮助。我在帖子中也提到了 3 个。 来自马来西亚的您好! :D

以上是关于在 IE 和 Edge 上拖动 svg 元素的精灵的主要内容,如果未能解决你的问题,请参考以下文章

当 SVG 前面有一个不以像素为单位大小的元素时,IE 和 Edge 中的路径边缘模糊

中风 url 在 Edge 和 IE 11 SVG 中不起作用

Edge 和 IE 上的动画 SVG(使用 CSS)是不是有解决方法?

SVG 的 tabIndex 在 IE 和 React 中不起作用

为啥我的 SVG 在 IE1 或 /Edge 中无法正确显示?

SVG动画在Edge或IE中不起作用