Home JS rendered SVG text won't align correctly on occasion
Reply: 0

JS rendered SVG text won't align correctly on occasion

Tristram Tolliday
1#
Tristram Tolliday Published in 2017-11-14 15:36:14Z

I am using Angular's ng-transclude to insert text into an SVG, and then calculating the SVG's viewbox to match that of the inserted text, so that the line of text will always fit in a responsively sized div.

This feature works 99% of the time, but on occasion the SVG will load in a completely inaccurate way.

I cannot seem to find a reason as to why it does it,

any dubious advice would be greatly appreciated,

Tris

JQuery

var getViewbox = function () {
var els = $('.svgContent');
els.each(function () {
    if(!$(this).hasClass('loaded')){
    var bbox = $(this)[0].getBBox();
    var viewbox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
    var elParent = $(this)[0].parentNode;
    elParent.setAttribute("viewBox", viewbox);
    elParent.setAttribute("class", "loaded");
    $(this).addClass('loaded');
}
});
var cont = $('.svgContainer');
cont.each(function () {
    $(this).addClass('loaded');
});};

Angular Directive

AppName.directive("blockTitle", function ($timeout) {
return {
    restrict: "E",
    transclude: true,
    template:
      '<svg><text class="svgContent" ng-transclude></text></svg>',
    link: function ($scope, element, attrs) {
        $timeout(getViewbox,0);
    }
};})

HTML

<block-title>Title line 1</block-title> <block-title>Title line 2</block-title>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.238816 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO