如何拖动复杂的SVG？

Question

我有以下svg

<g id="end" transform="translate(125,125)"> 
        <path fill="#4DB3B3" d="M50,2.333C23.674,2.333,2.333,23.674,2.333,50S23.674,97.667,50,97.667S97.667,76.326,97.667,50S76.326,2.333,50,2.333z
             M82.771,58.973H17.229c-0.862,0-1.561-0.699-1.561-1.561V42.587c0-0.862,0.699-1.561,1.561-1.561h65.542
            c0.862,0,1.561,0.699,1.561,1.561v14.825C84.332,58.274,83.633,58.973,82.771,58.973z"/>
        <title>End</title>
    </g>

生成的svg看起来像

如果我要从蓝色区域拖动，拖动效果会很好。

我面临的唯一问题是每当我尝试从中心（白色区域）拖动时，事件监听器都不会触发。好像中间的白色区域不是SVG的一部分。

我该如何解决这个问题？

Answer 1

  

好像中间的白色区域不是SVG的一部分。

因为它不是SVG的一部分:)里面的白色区域是页面背景。你可以尝试把一些东西装进里面（比如一个白色的矩形）？

<g id="end" transform="translate(125,125)"> 

    <rect x="10" y="40" width="80" height="20" style="fill:#fff"></rect>

    <path fill="#4DB3B3" d="M50,2.333C23.674,2.333,2.333,23.674,2.333,50S23.674,97.667,50,97.667S97.667,76.326,97.667,50S76.326,2.333,50,2.333z
         M82.771,58.973H17.229c-0.862,0-1.561-0.699-1.561-1.561V42.587c0-0.862,0.699-1.561,1.561-1.561h65.542
        c0.862,0,1.561,0.699,1.561,1.561v14.825C84.332,58.274,83.633,58.973,82.771,58.973z"/>
    <title>End</title>
</g>