bounds don't work with svg element

Abierto
#467 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react
Área
frontend

Línea de trabajo

Start with the provided Draggable reproduction containing the SVG, grouped rect, and bounds="parent" or bounds="#mostouter". Trace how the Draggable component calculates bounds for SVG elements and compare that path with the reported working div case. Done means both bounds forms behave correctly for the SVG example without the parent-bound error.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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>)
}
Lenguaje dominante
JavaScript
Estrellas
9.3k
Forks
1k
Merge medio
3 d 8 h
PR fusionados (30 d)
4

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-grid-layout/react-draggable

Todos los issues de react-grid-layout/react-draggable

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.