Adding z-index to specific path within react-native-svg

Question

I'm using SvgCss from react-native-svg. The problem is that onPress event is triggering from free space around the path make the other svgs unreachable. I put "backgroundColor: blue" for svgs so that you can see the trouble makers parts in below picture.

I tried solving this by adding high zIndex to target paths in below code. it's not working . Does anyone have a suggestion?

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import { Text } from 'native-base';
import { SvgCss } from 'react-native-svg';

const PaintObject = ({ svg, objData, selectedColor }) => {
  const [color, setcolor] = useState(objData.initial_color);
  const [svgfile, setsvgfile] = useState('');

  useEffect(() => {
    Axios.get(svg).then(({ data }) => {
      setsvgfile(data);
    });
  }, []);

  if (svgfile !== '') {
    return (
      <SvgCss
        width={`${objData.width}%`}
        height={`${objData.width}%`}
        style={{
          color,
          backgroundColor: 'blue',
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
          zIndex: 1,
        }}
        xml={[...svgfile].join('').replace('currentcolor"','currentcolor" style="zIndex:1000"')}
        onPress={()=> setcolor(selectedColor)}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;

Answer 1

等待大神答复