Puede trabajar con los elementos SVG usted mismo. En particular, puede encontrar los puntos del polígono y agregar identificadores de elementos HTML que se pueden arrastrar con jQuery. (Asumo que el problema que tienes es que jQuery UI no funciona con el modelo de posicionamiento SVG.) Aquí hay un ejemplo completo que acabo de escribir (probado en Safari 5 y Firefox 9).
(Negación:. No soy un usuario regular de jQuery, este código puede ser unidiomatic de maneras además de no usar jQuery para todo)
<!DOCTYPE html>
<html><head>
<title>untitled</title>
<style type="text/css" media="screen">
.handle {
position: absolute;
border: 0.1em solid black;
width: 1em;
height: 1em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
function draggablePolygon(polygon) {
var points = polygon.points;
var svgRoot = $(polygon).closest("svg");
for (var i = 0; i < points.numberOfItems; i++) {
(function (i) { // close over variables for drag call back
var point = points.getItem(i);
var handle = document.createElement("div");
handle.className = "handle";
document.body.appendChild(handle);
var base = svgRoot.position();
// center handles over polygon
var cs = window.getComputedStyle(handle, null);
base.left -= (parseInt(cs.width) + parseInt(cs.borderLeftWidth) + parseInt(cs.borderRightWidth))/2;
base.top -= (parseInt(cs.height) + parseInt(cs.borderTopWidth) + parseInt(cs.borderBottomWidth))/2;
handle.style.left = base.left + point.x + "px";
handle.style.top = base.top + point.y + "px";
$(handle).draggable({
drag: function (event) {
setTimeout(function() { // jQuery apparently calls this *before* setting position, so defer
point.x = parseInt(handle.style.left) - base.left;
point.y = parseInt(handle.style.top) - base.top;
},0);
}
});
}(i));
}
}
</script>
</head><body>
<p>
(Offset to test)
<svg id="theSVG" width="500" height="500" style="border: 2px inset #CCC;">
<polygon id="x" points="200,200 100,100 100,1" fill="green" />
<polygon id="y" points="200,200 100,100 1,100" fill="red" />
</svg>
</p>
<script type="text/javascript">
draggablePolygon(document.getElementById("x"));
draggablePolygon(document.getElementById("y"));
</script>
</body></html>
También puede adjuntar un evento manejar el polígono SVG e implementar el arrastre (lo probé y esto podría funcionar), pero luego tendría que hacer clic dentro de los límites actuales del polígono, que es una interfaz de usuario atípica y posiblemente complicada, e implementar su propia prueba de impacto.
Para esto, agregaría un controlador onmousedown
al elemento de polígono. A continuación, recupere sus puntos, encuentre cuál está en el rango de la posición de clic, almacene la posición inicial del mouse y luego haga que un manejador onmousemove
modifique y y
a medida que cambia la posición del mouse.
¡Gracias ton! Estoy trabajando en arrastrar y hacer clic dentro de los límites es exactamente lo que quiero. También estoy tratando de etiquetar estos polígonos con svg-text, pero no descubrí cómo actualizar la posición del texto, mientras cambio el tamaño del polígono. ¿Puedes darme alguna pista? – user1159545
Claro, agregué una pista. Desafortunadamente no guardé el código que escribí primero. –
Oye, estoy enfrentando el problema, que necesito las coordenadas actualizadas del polígono a medida que lo estoy redimensionando. Cuando inspecciono un elemento de polígono redimensionado con Firebug, todavía tiene los puntos antiguos, aunque se cambió de tamaño. Alguna idea de como resolver esto? – user1159545