react-native-svg-transformer icon indicating copy to clipboard operation
react-native-svg-transformer copied to clipboard

fill-opacity and opacity are ignored in color replacement

Open gyoung-panopto opened this issue 3 years ago • 1 comments

I'm having an issue where fill-opacity and opacity are ignored when doing color replacement.

For example, I'm using this svg:

<svg width="306" height="167" viewBox="0 0 306 167" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="1.5" y="1.5" width="303" height="164" rx="4.5" stroke="black" stroke-width="3"/> <rect x="183.5" y="93.5" width="109" height="60" rx="2.5" fill="white" stroke="#808080" stroke-width="3"/> <rect x="187" y="97" width="102" height="53" rx="1" fill="#30733F" fill-opacity="0.2" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M242 125C247.525 125 252 120.525 252 115C252 109.475 247.525 105 242 105C236.475 105 232 109.475 232 115C232 120.525 236.475 125 242 125ZM242 130C235.325 130 222 133.35 222 140V145H262V140C262 133.35 248.675 130 242 130Z" fill="#30733F"/> </svg>

And my .svgrrc file has this mapping:

{ "replaceAttrValues": { "#30733F": "currentColor" } }

In the output, the color is replaced but the fill-opacity of the rect is ignored. I also tried with opacity and it was also ignored.

Is there any way to get this to work?

gyoung-panopto avatar Sep 01 '21 23:09 gyoung-panopto

Looks like a bug in react-native-svg: https://github.com/react-native-svg/react-native-svg/issues/1345

kristerkari avatar Sep 14 '21 05:09 kristerkari