App crash when rendering SVG

[antondalgren]

Bug

Rendering the following SVG causes app to crash, it is reproducible by rendering it in a clean project with the latest versions.

It is throwing errors on style="transform:translate3d", style="transform:translate" and fill="859e9d" that is missing a # to indicate that the value is hex. I have not managed to understand what causes the app crash, but I think it might be related to text animation.

SVG

<svg width="290" height="500" viewBox="0 0 290 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <filter id="f1">
      <feImage result="p0" xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjkwJyBoZWlnaHQ9JzUwMCcgdmlld0JveD0nMCAwIDI5MCA1MDAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzI5MHB4JyBoZWlnaHQ9JzUwMHB4JyBmaWxsPScjODU5ZTlkJy8+PC9zdmc+" />
      <feImage result="p1" xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjkwJyBoZWlnaHQ9JzUwMCcgdmlld0JveD0nMCAwIDI5MCA1MDAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nMjQzJyBjeT0nMjk4JyByPScxMjBweCcgZmlsbD0nI2M3Nzg0MScvPjwvc3ZnPg==" />
      <feImage result="p2" xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjkwJyBoZWlnaHQ9JzUwMCcgdmlld0JveD0nMCAwIDI5MCA1MDAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nMjM2JyBjeT0nMjY0JyByPScxMjBweCcgZmlsbD0nIzVhOTFiOCcvPjwvc3ZnPg==" />
      <feImage result="p3" xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjkwJyBoZWlnaHQ9JzUwMCcgdmlld0JveD0nMCAwIDI5MCA1MDAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nMTU5JyBjeT0nMTY3JyByPScxMDBweCcgZmlsbD0nIzBjZDVhYicvPjwvc3ZnPg==" />
      <feBlend mode="overlay" in="p0" in2="p1" />
      <feBlend mode="exclusion" in2="p2" />
      <feBlend mode="overlay" in2="p3" result="blendOut" />
      <feGaussianBlur in="blendOut" stdDeviation="42" />
    </filter>
    <clipPath id="corners">
      <rect width="290" height="500" rx="42" ry="42" />
    </clipPath>
    <path id="text-path-a" d="M40 12 H250 A28 28 0 0 1 278 40 V460 A28 28 0 0 1 250 488 H40 A28 28 0 0 1 12 460 V40 A28 28 0 0 1 40 12 z" />
    <path id="minimap" d="M234 444C234 457.949 242.21 463 253 463" />
    <filter id="top-region-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="24" />
    </filter>
    <linearGradient id="grad-up" x1="1" x2="0" y1="1" y2="0">
      <stop offset="0.0" stop-color="white" stop-opacity="1" />
      <stop offset=".9" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="grad-down" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0.0" stop-color="white" stop-opacity="1" />
      <stop offset="0.9" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="fade-up" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#grad-up)" />
    </mask>
    <mask id="fade-down" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#grad-down)" />
    </mask>
    <mask id="none" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="white" />
    </mask>
    <linearGradient id="grad-symbol">
      <stop offset="0.7" stop-color="white" stop-opacity="1" />
      <stop offset=".95" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="fade-symbol" maskContentUnits="userSpaceOnUse">
      <rect width="290px" height="200px" fill="url(#grad-symbol)" />
    </mask>
  </defs>
  <g clip-path="url(#corners)">
    <rect fill="859e9d" x="0px" y="0px" width="290px" height="500px" />
    <rect style="filter: url(#f1)" x="0px" y="0px" width="290px" height="500px" />
    <g style="filter:url(#top-region-blur); transform:scale(1.5); transform-origin:center top;">
      <rect fill="none" x="0px" y="0px" width="290px" height="500px" />
      <ellipse cx="50%" cy="0px" rx="180px" ry="120px" fill="#000" opacity="0.85" />
    </g>
    <rect x="0" y="0" width="290" height="500" rx="42" ry="42" fill="rgba(0,0,0,0)" stroke="rgba(255,255,255,0.2)" />
  </g>
  <text text-rendering="optimizeSpeed">
    <textPath startOffset="-100%" fill="white" font-family="'Courier New', monospace" font-size="10px" xlink:href="#text-path-a">
      0xc778417e063141139fce010982780140aa0cd5ab b" WETH
      <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" />
    </textPath>
    <textPath startOffset="0%" fill="white" font-family="'Courier New', monospace" font-size="10px" xlink:href="#text-path-a">
      0xc778417e063141139fce010982780140aa0cd5ab b" WETH
      <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" />
    </textPath>
    <textPath startOffset="50%" fill="white" font-family="'Courier New', monospace" font-size="10px" xlink:href="#text-path-a">
      0x859e9d8a4edadfedb5a2ff311243af80f85a91b8 b" cETH
      <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" />
    </textPath>
    <textPath startOffset="-50%" fill="white" font-family="'Courier New', monospace" font-size="10px" xlink:href="#text-path-a">
      0x859e9d8a4edadfedb5a2ff311243af80f85a91b8 b" cETH
      <animate additive="sum" attributeName="startOffset" from="0%" to="100%" begin="0s" dur="30s" repeatCount="indefinite" />
    </textPath>
  </text>
  <g mask="url(#fade-symbol)">
    <rect fill="none" x="0px" y="0px" width="290px" height="200px" />
    <text y="70px" x="32px" fill="white" font-family="'Courier New', monospace" font-weight="200" font-size="36px">cETH/WETH</text>
    <text y="115px" x="32px" fill="white" font-family="'Courier New', monospace" font-weight="200" font-size="36px">0.05%</text>
  </g>
  <rect x="16" y="16" width="258" height="468" rx="26" ry="26" fill="rgba(0,0,0,0)" stroke="rgba(255,255,255,0.2)" />
  <g mask="url(#fade-down)" style="transform:translate(72px,189px)">
    <rect x="-16px" y="-16px" width="180px" height="180px" fill="none" />
    <path d="M1 1C1 89 57.5 145 145 145" stroke="rgba(0,0,0,0.3)" stroke-width="32px" fill="none" stroke-linecap="round" />
  </g>
  <g mask="url(#fade-down)" style="transform:translate(72px,189px)">
    <rect x="-16px" y="-16px" width="180px" height="180px" fill="none" />
    <path d="M1 1C1 89 57.5 145 145 145" stroke="rgba(255,255,255,1)" fill="none" stroke-linecap="round" />
  </g>
  <circle cx="73px" cy="190px" r="4px" fill="white" />
  <circle cx="73px" cy="190px" r="24px" fill="none" stroke="white" />
  <g style="transform:translate(29px, 384px)">
    <rect width="84px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />
    <text x="12px" y="17px" font-family="'Courier New', monospace" font-size="12px" fill="white">
      <tspan fill="rgba(255,255,255,0.6)">ID:</tspan>
      9361
    </text>
  </g>
  <g style="transform:translate(29px, 414px)">
    <rect width="140px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />
    <text x="12px" y="17px" font-family="'Courier New', monospace" font-size="12px" fill="white">
      <tspan fill="rgba(255,255,255,0.6)">Min Tick:</tspan>
      229320
    </text>
  </g>
  <g style="transform:translate(29px, 444px)">
    <rect width="140px" height="26px" rx="8px" ry="8px" fill="rgba(0,0,0,0.6)" />
    <text x="12px" y="17px" font-family="'Courier New', monospace" font-size="12px" fill="white">
      <tspan fill="rgba(255,255,255,0.6)">Max Tick:</tspan>
      231320
    </text>
  </g>
  <g style="transform:translate(226px, 433px)">
    <rect width="36px" height="36px" rx="8px" ry="8px" fill="none" stroke="rgba(255,255,255,0.2)" />
    <path stroke-linecap="round" d="M8 9C8.00004 22.9494 16.2099 28 27 28" fill="none" stroke="white" />
    <circle style="transform:translate3d(24px, 27px, 0px)" cx="0px" cy="0px" r="4px" fill="white" />
  </g>
</svg>

Environment info

Run react-native info in your terminal and copy the results here. Also, include the precise version number of this library that you are using in the project

React native info output:

 System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 586.08 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.2 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.0 => 0.68.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.3.0 / 12.1.0

Steps To Reproduce

Try to render the SVG provided.

Describe what you expected to happen: The SVG to render properly :)