SVG在Fabric JS中不包含文本装饰属性

Question

I am applying these text decoration properties like underline, overline, line through to the text object on canvas, but resulted SVG doesn't have that properties.

Code

$('.text_decoration').click(function () {
    var status;
    $( this ).toggleClass( 'highlight' );
    if($(this).hasClass('highlight'))
    {
        status = true;
    }
    else
    {
        status = false;
    }


    //var text_decoration = $(this).val();
    var text_decoration = $(this).attr('data-action');
    var tObj = canvas.getActiveObject();
    //Check that text is selected
    if(tObj==undefined)
    {
        alert('Please select a Text');
        return false;
    }

    if(text_decoration=='underline')
    {
        tObj.set({
            underline: status
        });
    }
    else if(text_decoration=='linethrough')
    {
        tObj.set({
            linethrough: status
        });
    }
    else if(text_decoration=='overline')
    {
        tObj.set({
            overline: status
        });
    }
    canvas.renderAll();
});

Codepen

https://codepen.io/dhavalsisodiya/pen/EEbXvJ

Steps

1) Add text
2) Then apply the underline, overline and line through property
3) Click on "Show SVG" button.

Now the resulted svg doesn't have those properties, so how to resolve it?

Answer 1

Your codepen is linked to a beta version of fabricJS, that was transitioning from 1.x api to api 2.

Please update to latest from version 2, and the snippet will work