svg header alignment

create.js

create(){
    this.beforeCreate();

    var $text = this.figure.children().first();
    $text.addClass('hidden');
    var fontSize = Math.round(Number.parseInt($text.css('font-size')));
    var text = this.canvas.text(0, 0, $text.text());
    this._elements = [text];

    this.group.add(text);
    this.group.attr({
      fontSize: fontSize,
      fill: this._fill,
      stroke: this._borderColor,
      strokeWidth: this._borderWidth,
    });

    var naturalHeight = text.getBBox().height;
    if(!Number.isInteger(naturalHeight * 10) && !this.alreadyFixed){
      this.alreadyFixed = true;
      alert('adding fix to header');
      naturalHeight = Math.round(naturalHeight * 0.8928);
      this.figure.parent().addClass('fix');
    }

    console.log(!Number.isInteger(naturalHeight * 10), text.getBBox().height);

    this.setSVGWidthHeight(text.getBBox().width, naturalHeight);

    this.setStartingPoint(text);
    this.duplicate(text, 0);
    $text.remove();

    this.afterCreate();
  }

header.scss

header.main-header{
  background: url('../img/homepage/homepage_background.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;

  .header-text{
    position: relative;
    display: flex;
    justify-content: center;
    padding: 4.2vw 0;

    a{ color: $white !important; }

    &.fix{
      padding: 2vw 0 8vw;

      figure.bot-left{
        svg{
          bottom: 0;
          margin-bottom: 1vw;
        }
      }
      figure.bot-right{
        svg{
          bottom: 0;
          margin-bottom: 1vw;
        }
      }

    }

    $top: 2vw;
    figure.top-left{
      svg{
        bottom: 0;
        margin-top: $top;
      }
    }
    figure.top-right{
      svg{
        bottom: 0;
        margin-top: $top;
      }
    }

    @include differentFontSize(15vw);

    @media screen and (min-width: 1600px){
      @include differentFontSize($size8);

    }

    figure{

      svg{
        position: absolute;
      }

      // individual fixes and styles for each letter
      &.char-3{ z-index: 9; }
      &.char-Ea{ z-index: 10; }
      &.char-L{ z-index: 8; }
      &.char-Eb{ z-index: 7; }
      &.char-V{ z-index: 6; }
      &.char-Ec{ z-index: 5; }
      &.char-N{ z-index: 4; }
    }
  }

}

index.html

<header class="main-header">
  <div class="header-text">
    
    <!-- Before Javascript -->
    <figure class="char-3 bot-left"
      data-type="text"
      data-border-color="green"
      data-direction="bot-left">
        <h1>3</h1>
        <svg class="root"></svg>
    </figure>
    ...
    <!-- After Javascript -->
    <figure class="char-N bot-right"
      data-type="text"
      data-border-color="orange"
      data-direction="bot-right">
        <h1>N</h1>
        <svg class="root" width="732.734375" height="799">
        <desc>Created with Snap</desc>
        <defs></defs>
        <g id="content" fill="#ffffff" stroke="#dc654a" style="font-size: 199px; stroke-width: 2px;">
        <text x="0" y="749.25" z="0">L</text>
        <text x="5" y="744" z="1" class="">L</text>
        <text x="10" y="739" z="2" class="">L</text>
        ...
        <text x="15" y="734" z="3" class="">L</text>
        <text x="20" y="729" z="4" class="">L</text>
        </g>
       </svg>
    </figure>
  </div>

</header>