5

In my app I have this code:

    <Svg width={W} height={H} viewBox={viewBox} style={style} preserveAspectRatio="none">
      <Defs>
        <Mask id="mask" x={0} y={0} width={W} height={H} maskUnits="userSpaceOnUse" maskContentUnits='userSpaceOnUse'>
          <Nested name="Path" animated d={path} stroke="white" strokeLinejoin="round" strokeWidth={10} strokeDasharray="5 60" strokeDashoffset={pathOffset}/>
        </Mask>
      </Defs>

      <G mask="url(#mask)">
        <Nested name="Path" d={path} stroke="orange" strokeLinejoin="round"/>
        {fields.map( f => <Nested key={f.id} {...f}/>)}
      </G>

    </Svg>

where Nested is a delegation to Path, Circle and other RN-SVG elements.

Now, if the G@mask is removed, the element in Android Emulator or on real device it looks like so:

enter image description here

With G@mask it is displayed with reduced precision / pixelated / blurred:

enter image description here

I prepared a snack -> https://snack.expo.dev/@injecteer/react-native-svg-mask and in web-mode the mask with the animation looks just fine (the bottom line):

enter image description here

How to display the masked elements in full precision? What am I missing?

injecteer
  • 20,038
  • 4
  • 45
  • 89
  • does it look blurred in a real android device too? or only on an emulator? this could be caused by the emulator's rendering precision too. Can you test with an emulator with higher resolution? – Ali Mobasheri May 31 '23 at 11:44
  • it's blurred/pixelated both on emulator and real device with FullHD+ – injecteer May 31 '23 at 11:54

0 Answers0