如何拖放SVG <g> <path> </path> </g>

时间:2014-10-29 03:19:52

标签: javascript svg

我想拖动svg元素元素 但是,我不知道“如何使用<script>中的功能” 而且,我不知道我在哪里写“ondrop,ondrag等”

这是益智游戏,所以我想拖动这个拼图(路径)。

<g > 
 <path id="forward" 
                        fill="#6ED7DB"
                        d="m10,70.68377l31.76814,-0.09769l0,22.85714l25.61947,0l0,-23.44322l135.61239,0l0,61.53847l-131.85487,0l0,18.46155l-26.64425,-0.29305l0,-19.34067l-34.50088,0l0,-59.68253z"
                        stroke-linecap="null" stroke-linejoin="null"
                        stroke-dasharray="null" stroke-width="2" stroke="#b6d6d6" 
                        fill="#aaffff"   
                        /></path>  

        <text class="blocklyText" transform="translate(24,120)"
        font-size="23px">앞으로&nbsp;움직이기</text>
</g> 

<g >
<path
        d="m346.5679,120.66669l0.38065,-22.14957l-44.97269,1l-0.97586,-44.95058l43.91376,-18.56654l239.14142,0.97719l-0.05536,60.58553l-213.8244,0.95441l-0.9205,21.49808l-22.68701,0.65149z"
            id="svg_7" stroke-linecap="null" stroke-linejoin="null"
            stroke-dasharray="null" stroke-width="2" stroke="#b6d6d6"
            fill="#ff7f00" />

<text class="blocklyText" transform="translate(310,86)"
        font-size="23px">IF you click</text>
</g>

1 个答案:

答案 0 :(得分:0)

有几个javascript库支持drag&amp;一滴SVG元素(例如Snap,Raphael,D3)。有关如何进行拖动的说明,请查看每个库的文档。