use foreignObject/div to place actor label in sequence diagram, enabled by config.textPlacement:fo

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -32,10 +32,12 @@ var conf = {
     bottomMarginAdj:1,
 
     // width of activation box
-    activationWidth:10
+    activationWidth:10,
+
+    //text placement as: tspan | fo
+    textPlacement: 'fo',
 };
 
-//var bb = getBBox('path');
 exports.bounds = {
     data:{
         startx:undefined,
@@ -273,6 +275,7 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
 
 };
 
+
 module.exports.drawActors = function(diagram, actors, actorKeys,verticalPos){
     var i;
     // Draw the actors

src/diagrams/sequenceDiagram/svgDraw.js

@@ -112,13 +112,8 @@ exports.drawActor = function(elem, left, verticalPos, description,conf){
     rect.ry = 3;
     exports.drawRect(g, rect);
 
-    g.append('text')      // text label for the x axis
+    _drawTextCandidateFunc(conf)(
-        .attr('x', center)
+      description, g, rect.x, rect.y, rect.width, rect.height);
-        .attr('y', verticalPos + (conf.height/2)+5)
-        .attr('class','actor')
-        .style('text-anchor', 'middle')
-        .text(description)
-    ;
 };
 
 exports.anchorElement = function(elem) {
@@ -269,3 +264,30 @@ exports.getNoteRect = function(){
     };
     return rect;
 };
+
+var _drawTextCandidateFunc = (function() {
+    var byText = function(content, g, x, y, width, height) {
+        var center = x + width / 2;
+        g.append('text')
+          .attr('x', center).attr('y', y + y / 2 + 5)
+          .attr('class', 'actor').style('text-anchor', 'middle')
+          .text(content);
+    };
+    var byFo = function(content, g, x, y, width, height) {
+        var s = g.append('switch');
+        var f = s.append("foreignObject")
+                  .attr('x', x).attr('y', y)
+                  .attr('width', width).attr('height', height);
+
+        f.append('div').style('display', 'table')
+          .style('height', '100%').style('width', '100%')
+          .append('div').style('display', 'table-cell')
+           .style('text-align', 'center').style('vertical-align', 'middle')
+           .text(content)
+
+        byText(content, s, x, y, width, height);
+    };
+    return function(conf) {
+      return conf.textPlacement==='fo' ? byFo : byText;
+    };
+})();