SVGLoader: fixed multiple css classes (#23191)

examples/jsm/loaders/SVGLoader.js

@@ -659,9 +659,14 @@ class SVGLoader extends Loader {
 
 				for ( let j = 0; j < selectorList.length; j ++ ) {
 
+					// Remove empty rules
+					const definitions = Object.fromEntries(
+						Object.entries( stylesheet.style ).filter( ( [ _, v ] ) => v !== '' )
+					);
+
 					stylesheets[ selectorList[ j ] ] = Object.assign(
 						stylesheets[ selectorList[ j ] ] || {},
-						stylesheet.style
+						definitions
 					);
 
 				}

examples/models/svg/multiple-css-classes.svg

@@ -0,0 +1,11 @@
+<svg width="377.7" height="571.5" version="1.1" viewBox="0 0 99.93 151.2" xmlns="http://www.w3.org/2000/svg">
+<style type="text/css">
+  .fill-red { fill: red; }
+  .stroke-green { stroke: green; }
+</style>
+  <g transform="translate(0 -54.56)">
+    <rect class="fill-red" x="5" y="59.56" width="89.93" height="35.5" />
+    <rect class="stroke-green" x="5" y="111.6" width="89.53" height="35.1" />
+    <rect class="fill-red stroke-green" x="5" y="165.7" width="89.53" height="35.1" />
+  </g>
+</svg>

examples/webgl_loader_svg.html

@@ -101,6 +101,7 @@
 					"Defs3": 'models/svg/tests/testDefs/Wave-defs.svg',
 					"Defs4": 'models/svg/tests/testDefs/defs4.svg',
 					"Defs5": 'models/svg/tests/testDefs/defs5.svg',
+					"Multiple CSS classes": 'models/svg/multiple-css-classes.svg',
 					"Zero Radius": 'models/svg/zero-radius.svg'
 
 				} ).name( 'SVG File' ).onChange( update );