时间戳

首页 > 解决方案 > 如何使 SVG 元素可拖动

javascript - 如何使 SVG 元素可拖动

问题描述

我有一个包含 SVG 代码的 HTML 文件，如下所示：

<g id="node27" class="node"><title>blahblah</title>
<ellipse fill="none" stroke="black" cx="242" cy="-401" rx="58.5343" ry="58.8803"/>
<text text-anchor="start" x="213.5" y="-403.5" font-family="Arial" font-weight="bold" font-size="10.00">SVG Sample</text>
<text text-anchor="start" x="227" y="-393.5" font-family="Arial" font-weight="bold" font-size="10.00">Element</text>
</g>

我正在尝试使这个椭圆可拖动。到目前为止，我取得的最大成功是在页面底部使用 CSS，如下所示：

<style type="text/css">
.node:hover {
        fill: green
}

当我将鼠标悬停在该元素上时，文本变为绿色。我真正想做的是能够在页面周围拖动这个元素。有拖动 CSS 选择器吗？

标签： javascriptjqueryhtmlcsssvg

解决方案

推荐阅读