SVG render issue when theme values stored as strings

Version

5.2.1

Reproduction link

https://jsfiddle.net/eb9dz2f3/3/

Steps to reproduce

1. Add line width to template, but store it as a string (same as the output from ECharts theme builder)
2. Use SVG renderer
3. Change grid: top argument until the line stops appearing (in example link, changing it to 17% makes the line disappear, but 18% works)

What is expected?

Line should render as normal

What is actually happening?

Line doesn’t render under both of these conditions:

• Renderer is SVG
• Certain values are inputted into the grid: top argument

---

This is a strange issue. A line chart I built stopped rendering the line, but I was able to get a bar and scatter to work with the same data. I had the line working earlier and the only thing I changed to break it was the grid: top argument. After playing around with different values for that argument, I found that some numbers worked while others didn’t.

I checked the renderer and this is an issue specific to SVG - the chart works as normal with Canvas. My assumption was that there is some strange rounding happening when it tries to calculate the position of the line. I couldn’t find anything wrong with the underlying SVG elements on inspection in my browser, so the actual problem is a mystery to me.

After looking further into it, I found that the line width option in my custom theme file was stored as a string instead of a number. Changing it to a number solved the SVG rendering problem.

I built the custom theme using the ECharts theme builder, which outputs a string if you edit the line width option.

I am not sure if this is an issue with the theme builder or SVG rendering, but wanted to share in case it’s helpful to anyone else. Everything is working for me now.

[plainheart]

This is definitely caused by an unexpected lineWidth of type string. Let’s take a look at the rect command in SVG path builder. https://github.com/ecomfe/zrender/blob/master/src/svg/graphic.ts#L247-L253 We will find there will be a calculation error when the width/height of type string plus the numeric x/y.

I’m not sure if it’s necessary to be fixed. But anyway, we should ensure that the lineWidth is a number. @pissang

Fortunately, this issue doesn’t exist in the next version. https://github.com/ecomfe/zrender/blob/next/src/svg/SVGPathRebuilder.ts#L113-L120

The theme builder does need further improvement. @Ovilia

[Ovilia]

Thanks for reporting. I will look into it.