Jak wyśrodkować etykietę Bootstrap na SVG?

Question

Chcę przesunąć etykietkę narzędzia o kilka pikseli w prawo, aby strzałka znajdowała się pośrodku komórki, w której znajduje się kursor (aktualnie znajduje się w punkcie (0,0), czyli w lewym górnym rogu). To jest mój kod:

$("rect.cell").tooltip({ 
    title: "hola", 
    placement: "top" 
    }); 

i obraz:

Idealnie chciałbym to zrobić przy użyciu javascript, więc mogę zaktualizować liczbę pikseli w przypadku zmiany rozmiaru komórek.

Answer 1

Oto proste przedłużenie realizacji getPosition nachocab że obsługuje zarówno elementy HTML regularne i elementów SVG:

getPosition: function (inside) { 
    var el = this.$element[0] 
    var width, height 

    if ('http://www.w3.org/2000/svg' === el.namespaceURI) { 
     var bbox = el.getBBox() 
     width = bbox.width 
     height = bbox.height 
    } else { 
     width = el.offsetWidth 
     height = el.offsetHeight 
    } 

    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    'width': width 
    , 'height': height 
    }) 
} 

Answer 2

Wydaje się być błąd w Firefox/Chrome dla elementów SVG (jak w moim przypadku) https://bugzilla.mozilla.org/show_bug.cgi?id=649285

więc po prostu zmienił bootstrap-tooltip.js z tego:

getPosition: function (inside) { 
    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    width: this.$element[0].offsetWidth 
    , height: this.$element[0].offsetHeight 
    }) 
} 

temu :

getPosition: function (inside) { 
    return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { 
    width: this.$element[0].getBBox().width 
    , height: this.$element[0].getBBox().height 
    }) 
} 

Answer 3

Okazało się, że pozycjonowanie był słaby w Chrome (na odpowiedniej wysokości, a umieszczone w skrajnej lewej strony SVG: człon rect) i Firefox (na odpowiedniej wysokości, całkowicie błędne pozycja x). Ja byłem za pomocą wtyczki svgdom dla jQuery (nie wiem, czy że zrzucił na moje wyniki w ogóle), ale tutaj jest rozwiązanie, które wymyśliłem:

https://gist.github.com/2886616

Jest to edycja przeciwko połączeniu boostrap.js . Oto długo uśpione problem, że ktoś złożył przeciwko bootstrap:

https://github.com/twitter/bootstrap/issues/2703