feat: Support :hover and :active on SVG elements

[MatiPl01]

Adds pointer :hover for react-native-svg, and makes overlapping SVG shapes resolve :hover/:active to the front-most one (they share one SvgView canvas, so the topmost shape wins). Also fixes touch :active on SVG on Android, where the per-view listener could miss ACTION_DOWN on a real finger; the press now comes from the window touch observer instead.

Demo

:hover on overlapping circles (the front one wins in the overlap):

svg-hover-showcase.mp4

:active on an SVG circle (press darkens it, dragging past the slop reverts):

svg-active-showcase.mp4

Same taps, base vs this PR - on the base the touch is missed and nothing reacts:

svg-hover-before-after.mp4

Example source (drop-in EmptyExample.tsx)

import React, { type ComponentType } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated from 'react-native-reanimated';
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
// @ts-ignore RNSVG doesn't export types for web
import { Circle, Svg } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(
  Circle
) as ComponentType<Record<string, unknown>>;

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>
        :hover on overlapping SVG circles - tap the lens where they overlap and
        only the front (blue) circle changes, since RNSVG hit-tests the top-most
        shape
      </Text>
      <Svg height={180} width={240}>
        {/* back circle - drawn first, so it sits underneath */}
        <AnimatedCircle
          cx={95}
          cy={90}
          r={65}
          fill="#fca5a5"
          onStartShouldSetResponder={() => true}
          style={{
            fill: { default: '#fca5a5', ':hover': '#dc2626' },
            transitionDuration: '150ms',
          }}
        />
        {/* front circle - drawn last, so it sits on top */}
        <AnimatedCircle
          cx={145}
          cy={90}
          r={65}
          fill="#93c5fd"
          onStartShouldSetResponder={() => true}
          style={{
            fill: { default: '#93c5fd', ':hover': '#2563eb' },
            transitionDuration: '150ms',
          }}
        />
      </Svg>

      <Text style={styles.label}>
        :active on an SVG element - press and hold to darken, drag past the slop
        to revert
      </Text>
      <Svg height={80} width={80}>
        <AnimatedCircle
          cx={40}
          cy={40}
          r={36}
          fill="#3b82f6"
          onStartShouldSetResponder={() => true}
          style={{
            fill: { default: '#3b82f6', ':active': '#1e3a8a' },
            transitionDuration: '200ms',
          }}
        />
      </Svg>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 32,
  },
  label: {
    fontSize: 14,
    color: '#334155',
    textAlign: 'center',
    paddingHorizontal: 24,
  },
});