0

I am trying to create an Invoice design using SVG and Handlebar.

The process is as follows:

First I have created invoice design in Inkscape (.svg format) and used handlebar template for dynamic values.

Here is the ajax:

zubizi.getSalesById(id).then(function (sales_details) {
    $.ajax({
        url: '/assets/img/print.svg',
        dataType: 'text',
        success: function (data) {
            var bill = Handlebars.compile(data);
            console.log(zubizi.settings);
            $('#print-placeholder').html(bill(sales_details));
        }
    });
});

The handlebar template: enter image description here

Here is the output: enter image description here It is working but, the items of the invoice are overlapping

How can I change the Y value of the object inside that handlebar each loop??

Can I use external objects or set the Y values dynamic?? How??

Any ideas would be appreciated.

Hello World
  • 2,673
  • 7
  • 28
  • 60
  • Hello and welcome to Stackoverflow. Are you able to share some of your code so that we know how to help you? – ksav Nov 28 '18 at 12:43
  • Providing that all the items have the same height, just use the index of the loop that creates the items to set the x/y position inside the SVG. – Shilly Nov 28 '18 at 12:46
  • @ksav I have added some details in the question – Hello World Nov 28 '18 at 12:51
  • @Shilly but where can i define that??? – Hello World Nov 28 '18 at 12:51
  • 1
    @HelloWorld https://stackoverflow.com/questions/11884960/how-to-get-index-in-handlebars-each-helper So either `{{@index}}` or `{{@key}}`, depending on your handlebars version. Or register your own helper function that does the loop for you. The handlebars manual has all the syntax. – Shilly Nov 28 '18 at 13:05
  • 2
    As you found out, SVG does not handle the layout of text in lines. You will get much better results if you design your invoice with HTML, and only insert the grafical elements like the logo as SVG content. HTML _is_ a layout language, and `` elements can be placed anywhere inside HTML pages. – ccprog Nov 28 '18 at 13:56

0 Answers0