Repository navigation
bounds don't work with svg element #467
Description
Hi below is a very simple replication of the use case i am trying to do. I can confirm that bounds work with regular divs, but once i switch the exact same setting to within svg, it doesn't work anymore
using bounds="parent" will error out.
using bounds="#mostouter" wouldn't error out, but feature is ineffective.
export const test = function(){
return (<div id="mostouter" style={{width:"600px", height:"600px", background:"pink"}}>
<div style={{width:"500px", height:"500px", background:"teal"}}>
<svg style={{overflow:'visible'}}>
<Draggable bounds="#mostouter"> //{{right: 300, bottom: 300}} works
<g>
<rect
width={50}
height={50}
rx="10"
ry="10"
style={{ fill: "rgba(0,0,0,0.5)" }}
></rect>
</g>
</Draggable>
</svg>
</div>
</div>)
}
Activity
sankarnarayanansr commentedon Apr 20, 2021
Don't use it as SVG. Encode SVG and give it as source to an image inside dragable. It will work fine.
STRML commentedon Sep 27, 2026
#789 (open) adds a
getBoundingClientRect()fallback for SVG elements in bounds calculations, which covers this.