SVGRenderer: Refactored fill/stroke opacity code.

mrdoob · Jan 2, 2020 · a655bbe · a655bbe
1 parent 110ec68
commit a655bbe
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/examples/js/renderers/SVGRenderer.js b/examples/js/renderers/SVGRenderer.js
@@ -120,13 +120,19 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function getSvgColor( color, opacity, asStroke ) {
+	function getSvgColor( color ) {
 
 		var arg = Math.floor( color.r * 255 ) + ',' + Math.floor( color.g * 255 ) + ',' + Math.floor( color.b * 255 );
 
-		if ( opacity === undefined || opacity === 1 ) return 'rgb(' + arg + ')';
+		return 'rgb(' + arg + ')';
 
-		return 'rgb(' + arg + ');' + ( asStroke ? 'stroke-opacity' : 'fill-opacity' ) + ':' + opacity;
+	}
+
+	function getSvgOpacity( opacity ) {
+
+		if ( opacity === undefined || opacity === 1 ) return 'none';
+
+		return opacity;
 
 	}
 
@@ -139,7 +145,7 @@ THREE.SVGRenderer = function () {
 	this.clear = function () {
 
 		removeChildNodes();
-		_svg.style.backgroundColor = getSvgColor( _clearColor, _clearAlpha );
+		_svg.style.backgroundColor = getSvgColor( _clearColor ) + ';fill-opacity:' + getSvgOpacity( _clearAlpha );
 
 	};
 
@@ -373,7 +379,7 @@ THREE.SVGRenderer = function () {
 
 		if ( material.isSpriteMaterial || material.isPointsMaterial ) {
 
-			style = 'fill:' + getSvgColor( material.color, material.opacity );
+			style = 'fill:' + getSvgColor( material.color ) + ';fill-opacity:' + getSvgOpacity( material.opacity );
 
 		}
 
@@ -387,7 +393,7 @@ THREE.SVGRenderer = function () {
 
 		if ( material.isLineBasicMaterial ) {
 
-			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity, true ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+			var style = 'fill:none;stroke:' + getSvgColor( material.color ) + ';stroke-opacity:' + getSvgOpacity( material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
 
 			if ( material.isLineDashedMaterial ) {
 
@@ -447,11 +453,11 @@ THREE.SVGRenderer = function () {
 
 		if ( material.wireframe ) {
 
-			style = 'fill:none;stroke:' + getSvgColor( _color, material.opacity, true ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+			style = 'fill:none;stroke:' + getSvgColor( _color ) + ';stroke-opacity:' + getSvgOpacity( material.opacity ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
 
 		} else {
 
-			style = 'fill:' + getSvgColor( _color, material.opacity );
+			style = 'fill:' + getSvgColor( _color ) + ';fill-opacity:' + getSvgOpacity( material.opacity );
 
 		}
 

diff --git a/examples/jsm/renderers/SVGRenderer.js b/examples/jsm/renderers/SVGRenderer.js
@@ -136,13 +136,19 @@ var SVGRenderer = function () {
 
 	}
 
-	function getSvgColor( color, opacity, asStroke ) {
+	function getSvgColor( color ) {
 
 		var arg = Math.floor( color.r * 255 ) + ',' + Math.floor( color.g * 255 ) + ',' + Math.floor( color.b * 255 );
 
-		if ( opacity === undefined || opacity === 1 ) return 'rgb(' + arg + ')';
+		return 'rgb(' + arg + ')';
 
-		return 'rgb(' + arg + ');' + ( asStroke ? 'stroke-opacity' : 'fill-opacity' ) + ':' + opacity;
+	}
+
+	function getSvgOpacity( opacity ) {
+
+		if ( opacity === undefined || opacity === 1 ) return 'none';
+
+		return opacity;
 
 	}
 
@@ -155,7 +161,7 @@ var SVGRenderer = function () {
 	this.clear = function () {
 
 		removeChildNodes();
-		_svg.style.backgroundColor = getSvgColor( _clearColor, _clearAlpha );
+		_svg.style.backgroundColor = getSvgColor( _clearColor ) + ';fill-opacity:' + getSvgOpacity( _clearAlpha );
 
 	};
 
@@ -389,7 +395,7 @@ var SVGRenderer = function () {
 
 		if ( material.isSpriteMaterial || material.isPointsMaterial ) {
 
-			style = 'fill:' + getSvgColor( material.color, material.opacity );
+			style = 'fill:' + getSvgColor( material.color ) + ';fill-opacity:' + getSvgOpacity( material.opacity );
 
 		}
 
@@ -403,7 +409,7 @@ var SVGRenderer = function () {
 
 		if ( material.isLineBasicMaterial ) {
 
-			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity, true ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+			var style = 'fill:none;stroke:' + getSvgColor( material.color ) + ';stroke-opacity:' + getSvgOpacity( material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
 
 			if ( material.isLineDashedMaterial ) {
 
@@ -463,11 +469,11 @@ var SVGRenderer = function () {
 
 		if ( material.wireframe ) {
 
-			style = 'fill:none;stroke:' + getSvgColor( _color, material.opacity, true ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+			style = 'fill:none;stroke:' + getSvgColor( _color ) + ';stroke-opacity:' + getSvgOpacity( material.opacity ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
 
 		} else {
 
-			style = 'fill:' + getSvgColor( _color, material.opacity );
+			style = 'fill:' + getSvgColor( _color ) + ';fill-opacity:' + getSvgOpacity( material.opacity );
 
 		}