Is there any way to adjust the position of the text made of svg?

1 Answer 100 Views
Report Parameters Report Viewer - HTML5
WoorimartDEV
Top achievements
Rank 1
Iron
Iron
WoorimartDEV asked on 31 Oct 2022, 01:31 AM | edited on 31 Oct 2022, 01:32 AM

[Report Designer View]

[Report Explorer]

[Properties of ImageView(GoodsName)]

[Edit Expression(GoodsName)]

='<svg style="background-color:green">
    <text
        font-family="HY헤드라인M"
        fill="black" 
        x="0%" 
        y="50%" 
        textLength="100%"
        dominant-baseline="middle" 
        lengthAdjust="spacingAndGlyphs"   
    >
        '+ Fields.goodsName+'
    </text>
</svg>'

[Report Print View]

[Print View]

(When I push this Print Icon)

Hello, thank you for your reply to the previous inquiry.

I have a question while applying it.
(What I asked you before: https://www.telerik.com/forums/how-to-stretch-in-textbox)


1. Report Print View screen and Print View screen are different.
2. The green box on the Report Print View screen is the size and location of the goodsName currently set to the Report Parameter.
I'd like to stretch the goodsName in the green box. It's okay if the letters are crushed, so is there a way to put the letters in the green box exactly like this?


1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 03 Nov 2022, 03:26 PM

Hi Doyeong,

Thank you for the provided information!

When printing from the HTML5 Report Viewer, the report is actually being rendered to PDF using the browser's built-in PDF plugin -  Printing Reports - Telerik Reporting.

In PDF rendering, by default, the SVG images will be rendered using vector-based or raster-based graphic primitives. If you wish to instead keep the look of the report viewer, you may override the default functionality through the UseSvgVectorRendering PDF device info setting - PDF Device Information Settings - Telerik Reporting. When set to false, we will instead render the image as a bitmap and it should look like in the report viewer.

You may add this device info setting either through the report viewer events such as printBegin(e, args) - Telerik Reporting where the args will have the deviceInfo object , or in the configuration of the project - extensions Element - Telerik Reporting.

Regarding the last question, about stretching the text, I am not an expert on SVGs but I think you may try to scale the text as suggested in the html - How to stretch svg text vertically - Stack Overflow thread.

Regards,
Dimitar
Progress Telerik

Brand new Telerik Reporting course in Virtual Classroom - the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products. Check it out at https://learn.telerik.com/.
WoorimartDEV
Top achievements
Rank 1
Iron
Iron
commented on 04 Nov 2022, 06:25 AM

Hello.
Thank you for your answer.
I applied it with the contents you answered.


[Report Print View]

[Print View]

(When I push this Print Icon)

However, in the case of printBegin that you mentioned, it occurs when I press the print button on the [Report Print View] screen.
In my opinion, specifying false in the settings in the PDF is
Looks like the screen in "[Report Print View]" is being applied to "[Print View]".
What I want is for the screen of "[Print View]" to be applied to "[Report Print View]".
And is it right to apply it like this?


reportSource: {...},
printBegin: function(e, args) { 
                    console.log("This event handler will be called before printing the report.");
                    console.log(e);
                    console.log(args);
                    args.UseSvgVectorRendering = false;
                }

 

 

Dimitar
Telerik team
commented on 08 Nov 2022, 03:38 PM

If you want the setting to be applied in all PDF renders and not only on print, please set it in the configuration file of the project through the extensions Element. For example:

"telerikReporting": {
    "extensions": [
        {
            "name": "PDF",
            "parameters": [
                {
                    "Name": "UseSvgVectorRendering",
                    "Value": "false"
                }
            ]
        }
    ]
}

Otherwise, the problem with the provided code snippet might be that the code is modifying the args object, it should instead edit its deviceInfo property, for example:

reportSource: {...},
printBegin: function(e, args) { 
                    args.deviceInfo["UseSvgVectorRendering"] = false;
                }
Tags
Report Parameters Report Viewer - HTML5
Asked by
WoorimartDEV
Top achievements
Rank 1
Iron
Iron
Answers by
Dimitar
Telerik team
Share this question
or