SVGLoader: Improved style parsing

[ndebeiss]

Adding example svg_load_and_render which loads the SVG at the left of the screen, and renders it with SVGRenderer at the right of the screen.
Correct the loading of style defined on path tags. I will extend it to other tags concerned as I add examples.
It is only a start for working on SVG load and render.
It concerns feature request #13478 and #4429 (closed)

[Mugen87]

For testing: https://rawgit.com/ndebeiss/three.js/dev/examples/svg_load_and_render.html

[Mugen87]

There is already: https://rawgit.com/mrdoob/three.js/dev/examples/webgl_loader_svg.html

I don't think it makes sense to add an additional example that is more or less equivalent.

[mrdoob]

I know this is confusing but... SVGRenderer is not the most optimal way of rendering a SVG 😁

[mrdoob]

The changes to SVGLoader look good though. Do you mind removing the example from this PR for now?

[ndebeiss]

Hello
Thanks for the comments. I agree it is more a test than an example but I only found jsunit and benchmarking in test directory. That way I quickly test both SVGLoader and SVGRenderer.
Although there might be persons who would like to see if they can add 3D features to their SVG models by passing it through three.js. I wrote JS for cloning and animating SVGs in 3D for people of ThisEqualsThat. There are lots of SVG pictures available, and it is not difficult to write and modify.
I will remove the test example from PR. There will be more corrections to both SVGLoader and SVGRenderer coming, if you want.

I did not understand your comment :

SVGRenderer is not the most optimal way of rendering a SVG

You mean not passing it through three.js ? 😃

[mrdoob]

I did not understand your comment :

SVGRenderer is not the most optimal way of rendering a SVG

Yeah, SVGLoader converts a SVG to triangles. SVGRenderer renders these triangles as SVG 😵

[mrdoob]

Thanks!

[mrdoob]

Hmm...

After this PR, the current example is now all white. Any ideas?

https://rawgit.com/mrdoob/three.js/dev/examples/webgl_loader_svg.html

[ndebeiss]

The code : function parseStyle( node, style ) { style.fill = node.style.fill; } should not erase style is there is no style on path tag. And there is an extra comma which breaks the example under Chrome : point.y + numbers[ 5 ], ); i will correct that 2018-04-07 19:02 GMT+02:00 Mr.doob <[email protected]>:

…

Hmm... After this PR, the current example is now all white. Any ideas? https://rawgit.com/mrdoob/three.js/dev/examples/webgl_loader_svg.html — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#13787 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAnz-6Jwkh29rDn_BPePM8DBcYiDcIyRks5tmPEbgaJpZM4TKF9o> .

[ndebeiss]

sorry not to have tested the main example for non regression :-( 2018-04-07 19:17 GMT+02:00 nicolas debeissat <[email protected]>:

…

The code : function parseStyle( node, style ) { style.fill = node.style.fill; } should not erase style is there is no style on path tag. And there is an extra comma which breaks the example under Chrome : point.y + numbers[ 5 ], ); i will correct that 2018-04-07 19:02 GMT+02:00 Mr.doob ***@***.***>: > Hmm... > > After this PR, the current example is now all white. Any ideas? > > https://rawgit.com/mrdoob/three.js/dev/examples/webgl_loader_svg.html > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#13787 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAnz-6Jwkh29rDn_BPePM8DBcYiDcIyRks5tmPEbgaJpZM4TKF9o> > . >