search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
94 stars 27 forks source link

Using replace_svg, the viewbox or window dimensions can not be changed #99

Closed tttdevelop closed 2 years ago

tttdevelop commented 2 years ago

I developed the SVG in the editor. Then I copy the code to a function and inject it with replace_svg.

When done in the editor, everything displays perfect.

When the same code is injected, the image and all content is clipped to a window about 200 wide and 200 height.

Here is the SVG code test I did (which works;

`

`

and here is the function to inject the code (which clips as in the attached picture;

` msg.payload = { "command": "replace_svg", "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"800\" viewBox=\"0 0 800 800\" width=\"800\"><image x=\"21.833\" y=\"12.458\" width=\"250\" height=\"300\" id=\"floorname\" xlink:href=\"/floor_4_name.png\"/>" }

return msg; `

Here is what the clipped output looks like.

svg error

bartbutenaers commented 2 years ago

Hi @tttdevelop, I have fixed this on Github. Would be nice if you could test if it solves your issue, before I publish it on NPM. You can install the fix directly from my Github repository, by executing following command (within your .node-red folder):

npm install bartbutenaers/node-red-contrib-ui-svg

Bart

tttdevelop commented 2 years ago

Fantastic response ! Works perfectly now. Thanks very much.