我使用JointJS库创建了一个自定义元素。使用从svg生成的路径值创建元素以形成交互式结构。
当我提供transform：translate（x，y）时，文本会根据x，y值显示在元素上，但仅限于mozilla浏览器中不是chrome。
注意：当我提供变换时：翻译..我可以在firebug中看到两次变换翻译..
当我提供ref：path，ref-y = .5时，文本只会在chrome中显示在元素上，而不会显示在mozilla中。
我想显示元素的文本值中心。另外我想指定像-webkit-transform这样的css元素。
请有人帮我解决这个问题。 对不起，如果我不能很好地解释它。
这是定义我的自定义对象的类
`
function makeElement(elem) {
var label = elem.title;
var status = elem.status;
var path = elem.path;
var hight = elem.hight;
var width = elem.width;
var translate = elem.translate;
var rotate= elem.rotate;
var letterSize = 13;
return new joint.shapes.basic.Path({
type: 'basic.Path',
id: label,
url: elem.url,
//size: { width:elem.width, height: elem.hight},
attrs: {
path: { d: elem.path, fill: colorMap[elem.color]},
text: { text: label + '\n' + elem.status, 'transform': elem.translate + ' ' + elem.rotate, 'font-size': letterSize, 'font-family': 'monospace'}
},
//rankDir: 'R'
});
}
.
.
.
function buildGraphFromElementsAndLink(elements, links) {
var r_elements = [];
var r_links = [];
_.each(elements, function(element) {
r_elements.push(makeElement(element));
});
_.each(links, function(values, key) {
_.each(values, function(value) {
r_links.push(makeLink(key, value));
});
});
return r_elements;
}
var elements = [
{
title: 'start',
status: '0 of 0',
color: 'darkblue',
width: '130.767',
height: '80.7667',
translate: 'translate (40, 120)',
rotate: 'rotate (0)',
path: 'M27.037,392.187L27.037,392.187c-5.768,0.089-10.423,4.797-10.426,10.712c0.002,0.122-.006,0.244,0,0.366l0,0v35.356l0,0c-0.016,0.212,0.004,0.425,0,0.638c0,5.98,4.761,8.828,10.593,8.829c0.337-0.003,0.674,0.036,1.009,0h32.758l0,0h21.214l28.452-27.137l-28.26-28.765H60.971l0,0H27.037L27.037,392.187z'
},
{
title: 'website',
status: '0 of 0',
color: 'darkblue',
width: '218.983',
height: '78.9833',
translate: 'translate (180, 120)',
rotate: 'rotate (0)',
path: 'M200.592,392.187h-0.102h-37.653l0,0H86.903l0,0l26.862,28.678l-26.862,27.224l0,0h75.935l0,0h46.972l0,0h12.058l27.673-27.322l-27.486-28.579H200.592L200.592,392.187z'
},
{
title: 'order',
status: '0 of 0',
color: 'darkblue',
width: '228.95',
height: '215.3',
translate: 'translate (425, 375)',
rotate: 'rotate (-90)',
path: 'm 369.669,288.302 c -0.627,10e-4 -1.254,-0.042 -1.88,0 l -44.679,0 0,0 -8.068,0 -27.484,26.398 27.672,28.376 27.172,0 0,0 0,0 0,49.111 -10.667,0 0,0 -104.42,0 0,0 26.862,28.678 -26.862,27.224 0,0 109.469,0 0,0 31.178,0 c 0.522,0.04 1.045,-0.012 1.569,0 0.681,-0.002 1.361,0.05 2.04,0 l 0.771,0 0,0 c 13.912,-1.381 24.618,-12.681 25.036,-26.229 l 0.014,0 0,-0.266 c 0.011,-0.172 0.02,-0.344 0.027,-0.516 -0.006,-0.241 -0.015,-0.481 -0.027,-0.722 l 0,-103.239 c 0.107,-0.95 0.162,-1.904 0.164,-2.859 -0.019,-14.345 -11.595,-25.177 -26.373,-25.956 l 0,0 -0.186,0 c -0.442,-0.033 -0.885,0.011 -1.328,0 l 0,0 z'
},
{
title: 'process',
status: '0 of 0',
color: 'darkblue',
width: '276.483',
height: '77.5',
translate: 'translate (250, 80)',
rotate: 'rotate (0)',
path: 'M132.084,288.302L104.6,314.43l27.672,28.646h21.089h0.175h157.561l0,0l-26.862-28.29l26.862-26.484l0,0H153.857h-0.309H132.084z'
},
{
title: 'cancel',
status: '0 of 0',
color: 'darkblue',
width: '156.1',
height: '218.317',
translate: 'translate (40, 250)',
rotate: 'rotate (-90)',
path:'M59.233,181.015c-1.14,0.006-0.929,0.01-1.755,0c-15.402,0-27.887,11.671-27.888,26.6c0.011,0.985-0.021,1.515,0,3.099v101.242c0.024,1.075,0.006,1.88,0,2.912c0,14.929,12.485,28.208,27.888,28.208c1.436,0.056,2.544-0.382,3.838,0h66.741l0,0l-26.863-28.29l26.863-26.484l0,0H84.256v-53.949h16.153l0,0h16.2l27.673-26.324l-27.486-27.013C97.059,180.981,76.482,180.847,59.233,181.015L59.233,181.015z'
},
{
title: 'fulfill',
status: '0 of 0',
color: 'darkblue',
width: '274.9',
height: '75.6167',
translate: 'translate (250, 30)',
rotate: 'rotate (0)',
path: 'M277.323,181.015h-0.428H121l0,0l26.863,26.862L121,234.352l0,0h156.455h0.056H298.6l27.674-26.556l-27.486-26.781H277.323z'
},
{
title: 'payment',
status: '0 of 0',
color: 'darkblue',
width: '150.383',
height: '214.767',
translate: 'translate (350, 140)',
rotate: 'rotate (-90)',
path: 'M309.445,74.941l-27.484,26.624l27.672,27.613c19.109-0.071,24.054-0.01,32.769,0v51.837h-38.657l0,0l26.862,26.742l-26.862,26.595l0,0c20.017-0.11,40.823-0.15,60.561,0c14.651-0.015,26.792-10.083,27.792-24.251h0.197V102.556h-0.186c0.033-0.433,0.055-0.865,0.066-1.299c-0.01-13.7-10.592-24.717-24.629-26.316h0.018C348.501,74.877,327.47,74.94,309.445,74.941L309.445,74.941z'
},
{
title: 'returns',
status: '0 of 0',
color: 'darkblue',
width: '361.633',
height: '77.0833',
translate: 'translate (200, -10)',
rotate: 'rotate (0)',
path: 'M45.067,74.941c-0.34-0.034-1.516,0-1.858,0c-5.672,0.001-9.401,3.542-9.401,9.214c0.001,0.273-0.023,1.177,0,1.449v31.945v1.01c-0.071,0.475,0.005-0.512,0-0.032c0.006,5.409,3.908,10.3,9.305,10.651h1.263H43.1c87.476,0.256,184.04,0.279,262.075,0l0,0l-26.862-27.375l26.862-26.862l0,0C219.786,75.025,124.68,74.941,45.067,74.941z'
},
{
title: 'suppliers',
status: '0 of 0',
color: 'lightblue',
width: '127.083',
height: '80.4833',
translate: 'translate (375, 120)',
rotate: 'rotate (0)',
path: 'M415.11,392.187L415.11,392.187c-5.609,0.084-10.138,6.248-10.141,11.859c0.002,0.115-0.006,0.231,0,0.347l0,0v33.537l0,0c-0.016,0.201,0.004,0.403,0,0.605c0,5.672,4.631,9.552,10.303,9.553c0.328-0.003,0.656,0.035,0.982,0h31.86l0,0h20.633l27.674-26.919l-27.486-28.982h-20.82l0,0H415.11L415.11,392.187z'
},
{
title: 'products',
status: '0 of 0',
color: 'lightblue',
width: '145.817',
height: '215.233',
translate: 'translate (510, 375)',
rotate: 'rotate (-90)',
path: 'M512.683,288.302L512.683,288.302h-22.179l-27.484,27.105l27.672,27.669h21.991l0,0l0,0v49.111h-38.718l0,0l26.863,28.57l-26.863,27.331l0,0h67.275l0,0c0.049,0.003,0.098-0.003,0.146,0c15.402,0,28.416-12.148,28.416-27.076c-0.004-0.479,0.031-0.957,0-1.435l0,0V318.375c0.166-1.159-0.01-2.328,0-3.499c-0.001-14.91-12.459-26.55-27.842-26.574l0,0H512.683L512.683,288.302z'
},
{
title: 'inventory',
status: '0 of 0',
color: 'lightblue',
width : '144.2',
height : '77.5',
translate: 'translate (400, 80)',
rotate: 'rotate (0)',
path: 'M380.842,288.302c10.933,3.734,18.599,13.352,18.606,25.009c-0.012,0.434-0.034,0.866-0.067,1.299h0.187v28.467h24.256l0,0h20.146l0,0h42.489l0,0l-26.862-27.482l26.827-27.292h0.035h-42.453h-0.071h-20.051l0,0H380.842z'
},
{
title: 'forward',
status: '0 of 0',
color: 'lightblue',
width: '128.167',
height: '77.1167',
translate: 'translate (375, 30)',
rotate: 'rotate (0)',
path: 'M409.79,181.015L409.79,181.015c-5.588,0.112-10.062,2.7-10.065,8.29c0.005,0.431-0.058,0.86,0,1.287v33.114c-0.009,0.125,0.004,0.249,0,0.374c0,5.672,4.673,10.271,10.346,10.271c0.001,0,0.001,0,0.001,0c0.351-0.004,0.701,0.04,1.049,0h32.037l0,0h0.059h21.089l27.673-27.739l-27.485-25.598h-21.335l0,0H409.79L409.79,181.015z'
},
{
title: 'reverse',
status: '0 of 0',
color: 'lightblue',
width: '261.083',
height: '214.967',
translate: 'translate (640, 140)',
rotate: 'rotate (-90)',
path: 'M375.117,74.941c10.933,3.733,18.598,12.951,18.606,24.608c-0.012,0.433-0.035,0.866-0.068,1.298h0.187v28.331h118.841v51.837h-44.052l0,0l26.862,25.781l-26.862,27.556l0,0h61.497l0,0c1.796,0.349,3.623-0.002,5.454,0c15.355-0.004,34.157-12.147,34.221-27.029l0,0V104.427c0.126-1.022-0.006-2.051,0-3.08c-0.018-14.307-17.363-25.577-32.099-26.406l0,0H375.117L375.117,74.941z'
}
];
`
谢谢。