Open
Description
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 FoundLibrary 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 :)