SVGLoader: Honor styles in `svg` tag. (#24263)

examples/jsm/loaders/SVGLoader.js

@@ -78,6 +78,7 @@ class SVGLoader extends Loader {
 			switch ( node.nodeName ) {
 
 				case 'svg':
+					style = parseStyle( node, style );
 					break;
 
 				case 'style':

examples/models/svg/tests/styles.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> <title id="apertureIconTitle">Aperture</title> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/> <g stroke-linecap="round"> <path d="M3 16H14.3164"/> <path d="M4.03589 6.20575L9.68257 15.9861"/> <path d="M13.0359 2.20575L7.37891 12.004"/> <path d="M10.9641 21.7942L16.6146 12.0074"/> <path d="M19.9641 17.7942L14.3086 7.99866"/> <path d="M21 7.98721H9.71844"/> </g> </svg>

examples/webgl_loader_svg.html

@@ -93,30 +93,31 @@
 
 				gui.add( guiData, 'currentURL', {
 
-					"Tiger": 'models/svg/tiger.svg',
-					"Three.js": 'models/svg/threejs.svg',
-					"Joins and caps": 'models/svg/lineJoinsAndCaps.svg',
-					"Hexagon": 'models/svg/hexagon.svg',
-					"Energy": 'models/svg/energy.svg',
-					"Test 1": 'models/svg/tests/1.svg',
-					"Test 2": 'models/svg/tests/2.svg',
-					"Test 3": 'models/svg/tests/3.svg',
-					"Test 4": 'models/svg/tests/4.svg',
-					"Test 5": 'models/svg/tests/5.svg',
-					"Test 6": 'models/svg/tests/6.svg',
-					"Test 7": 'models/svg/tests/7.svg',
-					"Test 8": 'models/svg/tests/8.svg',
-					"Test 9": 'models/svg/tests/9.svg',
-					"Units": 'models/svg/tests/units.svg',
-					"Ordering": 'models/svg/tests/ordering.svg',
-					"Defs": 'models/svg/tests/testDefs/Svg-defs.svg',
-					"Defs2": 'models/svg/tests/testDefs/Svg-defs2.svg',
-					"Defs3": 'models/svg/tests/testDefs/Wave-defs.svg',
-					"Defs4": 'models/svg/tests/testDefs/defs4.svg',
-					"Defs5": 'models/svg/tests/testDefs/defs5.svg',
-					"Style CSS inside defs": 'models/svg/style-css-inside-defs.svg',
-					"Multiple CSS classes": 'models/svg/multiple-css-classes.svg',
-					"Zero Radius": 'models/svg/zero-radius.svg'
+					'Tiger': 'models/svg/tiger.svg',
+					'Three.js': 'models/svg/threejs.svg',
+					'Joins and caps': 'models/svg/lineJoinsAndCaps.svg',
+					'Hexagon': 'models/svg/hexagon.svg',
+					'Energy': 'models/svg/energy.svg',
+					'Test 1': 'models/svg/tests/1.svg',
+					'Test 2': 'models/svg/tests/2.svg',
+					'Test 3': 'models/svg/tests/3.svg',
+					'Test 4': 'models/svg/tests/4.svg',
+					'Test 5': 'models/svg/tests/5.svg',
+					'Test 6': 'models/svg/tests/6.svg',
+					'Test 7': 'models/svg/tests/7.svg',
+					'Test 8': 'models/svg/tests/8.svg',
+					'Test 9': 'models/svg/tests/9.svg',
+					'Units': 'models/svg/tests/units.svg',
+					'Ordering': 'models/svg/tests/ordering.svg',
+					'Defs': 'models/svg/tests/testDefs/Svg-defs.svg',
+					'Defs2': 'models/svg/tests/testDefs/Svg-defs2.svg',
+					'Defs3': 'models/svg/tests/testDefs/Wave-defs.svg',
+					'Defs4': 'models/svg/tests/testDefs/defs4.svg',
+					'Defs5': 'models/svg/tests/testDefs/defs5.svg',
+					'Style CSS inside defs': 'models/svg/style-css-inside-defs.svg',
+					'Multiple CSS classes': 'models/svg/multiple-css-classes.svg',
+					'Zero Radius': 'models/svg/zero-radius.svg',
+					'Styles in svg tag': 'models/svg/tests/styles.svg'
 
 				} ).name( 'SVG File' ).onChange( update );