我尝试使用keith-wood的svg插件水平和垂直地将元素放在另一个内部,但是没有效果。我想如果用户点击一个元素(大部分时间都是多边形),那么组元素就位于元素的中心。这张图片显示了它现在如何工作以及我想要的:
我总是点击任何多边形,代码将该行放在内部容器的顶部。
这是我使用的代码:
var x = diente.x || 0,
y = diente.y || 0;
var defaultPolygon = {fill: 'white', stroke: '#444', strokeWidth: 0.5};
var dienteGroup = svg.group(parentGroup, {transform: 'translate(' + x + ',' + y + ')'});
var caraExteriorSuperior = svg.polygon(dienteGroup,
[[-3,-5],[23,-5],[20,0],[0,0]],
defaultPolygon);
caraExteriorSuperior = $(caraExteriorSuperior).data('cara', 'ES');
var caraSuperior = svg.polygon(dienteGroup,
[[0,0],[20,0],[15,5],[5,5]],
defaultPolygon);
caraSuperior = $(caraSuperior).data('cara', 'S');
var caraInferior = svg.polygon(dienteGroup,
[[5,15],[15,15],[20,20],[0,20]],
defaultPolygon);
caraInferior = $(caraInferior).data('cara', 'I');
var caraDerecha = svg.polygon(dienteGroup,
[[15,5],[20,0],[20,20],[15,15]],
defaultPolygon);
caraDerecha = $(caraDerecha).data('cara', 'D');
var caraIzquierda = svg.polygon(dienteGroup,
[[0,0],[5,5],[5,15],[0,20]],
defaultPolygon);
caraIzquierda = $(caraIzquierda).data('cara', 'Z');
var caraCentral = svg.polygon(dienteGroup,
[[5,5],[15,5],[15,15],[5,15]],
defaultPolygon);
caraCentral = $(caraCentral).data('cara', 'C');
var caraExteriorInferior = svg.polygon(dienteGroup,
[[20,20],[23,25],[-3,25],[0,20]],
defaultPolygon);
caraExteriorInferior = $(caraExteriorInferior).data('cara', 'EI');
var caraCompleto = svg.text(dienteGroup, 6, 33, diente.id.toString(),
{ fill: '#444', stroke: '#f00', strokeWidth: 0.1, style: 'font-size: 6pt;font-weight:normal' });
caraCompleto = $(caraCompleto).data('cara', 'X');
//**********************//
inside click event
////////////////////
var datahtml = diagnostico.canvas;
var groupCanvas = svg.group(dienteGroup);
$(groupCanvas).data('diagnostico', diagnostico);
svg.add(groupCanvas, datahtml);
svg.change(groupCanvas, {cx: element_polygon.width() / 2, cy: me.height() / 2 });
显然,width选项仅适用于svg容器。我不知道如何解决这个问题。
我感谢你们给我带来的所有帮助。
PD:对不起我糟糕的英语。