stylesheet jsName vs svgName fix

[jhlggit]

Related issue: #XXXX

Description

In the SVG Loader, there's some code to read styles from embedded style sheets, which are held in a collection called stylesheetStyles. This collection was being indexed into using svgName, but the styles in an embedded style sheet are actually identified by the slightly different jsName so, where these two differed, the styles were not being picked up.

The fix is a one-line change, in which stylesheetStyles[ svgName ] is replaced with stylesheetStyles[ jsName ] (two occurrences).

For example, here is a style node from an SVG file:

<style>.highlightBox { fill: #ffa500; fill-opacity: .2; } .highlightBoxReferent { fill: #9ff3db; fill-opacity: .3; }</style>

Elsewhere in the file, there are elements with this attribute
class="highlightBox"

With the old code, these elements were rendered as fully opaque but, with this fix, they are now rendered with the specified opacity of .2.

The likely reason this wasn't noticed before is that not all styles are affected. In the example above, the fill colour was not affected because, for fill colour, the svgName and the jsName are the same (namely, "fill").

SVG file referenced in this example:
LogicEssence1_TimesNewRomanPSMT_TimesNewRomanPSMT.xml

screenshot with old code:

screenshot with fixed code:

[Mugen87]

Not sure this bit is correct. The test SVG style-css-inside-defs.svg in the webgl_loader_svg example now renders incorrectly with this change. The red border becomes too wide.

You can test by comparing Prod with this PR:

https://threejs.org/examples/#webgl_loader_svg
https://rawcdn.githack.com/jhlggit/three.js/StyleSheetNameFixBranch/examples/index.html#webgl_loader_svg

If you open the SVG directly in Chrome or via mac Preview, it renders like in the Prod version.