Search code examples
svgbatik

How to drag complex SVG?

I have the following 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>

The generated svg looks like

enter image description here

If I were to drag from the blue area the dragging works fine.

The only issue I am facing is whenever I try to drag from the center (white area), the event listener doesn't fire. As if the white area in the middle is not part of the SVG.

How can I tackle this issue ?

Solution

  • As if the white area in the middle is not part of the SVG.

    Because it's not part of SVG :) The white area inside is the page background. You could try to put something filled inside (like a white rectangle)?

    <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>