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

JS rendered SVG text won't align correctly on occasion

user1545 Published in July 20, 2018, 5:04 am

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,



var getViewbox = function () {
var els = $('.svgContent');
els.each(function () {
    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");
var cont = $('.svgContainer');
cont.each(function () {

Angular Directive

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


<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.343612 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO