mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-06 07:06:11 +00:00
Support-rgb(R%,G%,B%)-percentage (#2363)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect --> # Summary Closes #1897 In our project, we encountered a problem with SVGs that include RGB/RGBA color values in percentage format. To address this, I've decided to handle it within the react-native-svg library. Also, I found an open issue for this - https://github.com/software-mansion/react-native-svg/issues/1897 `percentTo255`: Converts a percentage string (e.g., 50%) to its corresponding integer value on a scale of 0-255. This is done by parsing the percentage as a float and multiplying by 2.55 (since 100% equals 255 in RGB). `parseAlpha`: Converts the alpha component to a float between 0 and 1. If the alpha is a percentage, it divides by 100; otherwise, it parses it as a float directly. `parsePercentageRGBColor`: This function takes a color string as input and attempts to match it against the RGB_PATTERN or RGBA_PATTERN. If a match is found, it extracts the red, green, blue, and optional alpha components. It then converts these components from their percentage form to the 0-255 range (or normalized float for alpha). The function returns the color in standard rgb(r, g, b) or rgba(r, g, b, a) format. If the input color string does not match the patterns, it logs a warning and returns undefined `transformColorToPercentage`: This function checks if the given color value (which can be of type ColorValue from React Native) is a string matching the percentage-based RGB or RGBA patterns. It removes any whitespace from the color string and tests it against the patterns. If the color matches, it converts it using `parsePercentageRGBColor`. If not, it returns the original color value unchanged. <img width="240" alt="Screenshot 2024-07-23 at 18 45 25" src="https://github.com/user-attachments/assets/7ba0dcb7-1daa-4f84-9771-6884de76649a"> ## Test Plan Run test-examples with Test2363 ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist <!-- Check completed item, when applicable, via: [X] --> - [X] I have tested this on a device and a simulator - [X] I added documentation in `README.md` - [X] I updated the typed files (typescript) --------- Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
This commit is contained in:
hryhoriiK97
GitHub
@@ -24,6 +24,7 @@ import Test2266 from './src/Test2266';
|
||||
import Test2276 from './src/Test2276';
|
||||
import Test2327 from './src/Test2327';
|
||||
import Test2233 from './src/Test2233';
|
||||
import Test2363 from './src/Test2363';
|
||||
import Test2366 from './src/Test2366';
|
||||
import Test2397 from './src/Test2397';
|
||||
import Test2403 from './src/Test2403';
|
||||
|
||||
104
apps/test-examples/src/Test2363.tsx
Normal file
104
apps/test-examples/src/Test2363.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {SvgXml} from 'react-native-svg';
|
||||
|
||||
const svgXmlWithRGB = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="97.59pt" height="70.53pt" viewBox="0 0 97.59 70.53" version="1.1">
|
||||
<defs>
|
||||
<clipPath id="clip1">
|
||||
<path d="M 0 70.53125 L 97.589844 70.53125 L 97.589844 0.03125 L 0 0.03125 L 0 70.53125 Z M 0 70.53125 "/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="surface0">
|
||||
<g clip-path="url(#clip1)" clip-rule="nonzero">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 13.019531 11.28125 C 13.019531 11.28125 18.101562 14.53125 19.601562 29.863281 C 19.601562 29.863281 19.601562 44.863281 19.601562 70.03125 L 59.894531 70.03125 L 59.894531 29.695312 C 59.894531 29.695312 61.683594 14.695312 66.644531 11.28125 L 49.644531 4.53125 L 49.644531 0.53125 C 49.644531 0.53125 39.753906 -0.304688 39.753906 6.53125 C 39.753906 6.53125 40.769531 0.53125 30.019531 0.53125 L 30.019531 4.53125 L 13.019531 11.28125 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 130.195312 592.4875 C 130.195312 592.4875 181.015625 559.9875 196.015625 406.667187 C 196.015625 406.667187 196.015625 256.667187 196.015625 4.9875 L 598.945312 4.9875 L 598.945312 408.346875 C 598.945312 408.346875 616.835938 558.346875 666.445312 592.4875 L 496.445312 659.9875 L 496.445312 699.9875 C 496.445312 699.9875 397.539062 708.346875 397.539062 639.9875 C 397.539062 639.9875 407.695312 699.9875 300.195312 699.9875 L 300.195312 659.9875 L 130.195312 592.4875 Z M 130.195312 592.4875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 40.019531 51.917969 C 49.390625 51.917969 56.988281 44.320312 56.988281 34.945312 C 56.988281 25.574219 49.390625 17.976562 40.019531 17.976562 C 30.644531 17.976562 23.046875 25.574219 23.046875 34.945312 C 23.046875 44.320312 30.644531 51.917969 40.019531 51.917969 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 126.015625 8.346875 C 133.515625 23.346875 193.515625 345.846875 193.515625 345.846875 C 198.515625 460.846875 163.515625 578.346875 128.515625 588.346875 L 6.015625 28.346875 L 126.015625 8.346875 Z M 126.015625 8.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 783.515625 28.346875 L 666.015625 590.846875 C 631.015625 580.846875 593.515625 460.846875 598.515625 345.846875 C 598.515625 345.846875 656.015625 23.346875 663.515625 8.346875 L 783.515625 28.346875 Z M 783.515625 28.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 866.71875 486.901562 C 876.054688 489.284375 881.71875 498.776562 879.335938 508.1125 C 876.953125 517.448437 867.460938 523.1125 858.085938 520.729687 C 848.75 518.346875 843.125 508.815625 845.507812 499.479687 C 847.890625 490.14375 857.382812 484.51875 866.71875 486.901562 Z M 866.71875 486.901562 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 780.703125 439.245312 C 820.390625 283.620312 1004.335938 331.198437 965.546875 483.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(69.967193%,69.906157%,69.777981%);fill-opacity:1;" d="M 88.808594 30.210938 C 94.367188 28.792969 97.722656 23.140625 96.304688 17.582031 C 94.886719 12.023438 89.230469 8.667969 83.671875 10.085938 C 78.117188 11.503906 74.761719 17.160156 76.179688 22.71875 C 77.597656 28.273438 83.253906 31.632812 88.808594 30.210938 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 888.085938 403.190625 C 943.671875 417.370312 977.226562 473.89375 963.046875 529.479687 C 948.867188 585.065625 892.304688 618.620312 836.71875 604.440625 C 781.171875 590.260937 747.617188 533.698437 761.796875 478.1125 C 775.976562 422.565625 832.539062 388.971875 888.085938 403.190625 Z M 888.085938 403.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 13.019531 11.28125 C 13.019531 11.28125 18.101562 14.53125 19.601562 29.863281 C 19.601562 29.863281 19.601562 44.863281 19.601562 70.03125 L 59.894531 70.03125 L 59.894531 29.695312 C 59.894531 29.695312 61.683594 14.695312 66.644531 11.28125 L 49.644531 4.53125 L 49.644531 0.53125 C 49.644531 0.53125 39.753906 -0.304688 39.753906 6.53125 C 39.753906 6.53125 40.769531 0.53125 30.019531 0.53125 L 30.019531 4.53125 L 13.019531 11.28125 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 130.195312 592.4875 C 130.195312 592.4875 181.015625 559.9875 196.015625 406.667187 C 196.015625 406.667187 196.015625 256.667187 196.015625 4.9875 L 598.945312 4.9875 L 598.945312 408.346875 C 598.945312 408.346875 616.835938 558.346875 666.445312 592.4875 L 496.445312 659.9875 L 496.445312 699.9875 C 496.445312 699.9875 397.539062 708.346875 397.539062 639.9875 C 397.539062 639.9875 407.695312 699.9875 300.195312 699.9875 L 300.195312 659.9875 L 130.195312 592.4875 Z M 130.195312 592.4875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 40.019531 51.917969 C 49.390625 51.917969 56.988281 44.320312 56.988281 34.945312 C 56.988281 25.574219 49.390625 17.976562 40.019531 17.976562 C 30.644531 17.976562 23.046875 25.574219 23.046875 34.945312 C 23.046875 44.320312 30.644531 51.917969 40.019531 51.917969 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 12.601562 69.695312 C 13.351562 68.195312 19.351562 35.945312 19.351562 35.945312 C 19.851562 24.445312 16.351562 12.695312 12.851562 11.695312 L 0.601562 67.695312 L 12.601562 69.695312 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 126.015625 8.346875 C 133.515625 23.346875 193.515625 345.846875 193.515625 345.846875 C 198.515625 460.846875 163.515625 578.346875 128.515625 588.346875 L 6.015625 28.346875 L 126.015625 8.346875 Z M 126.015625 8.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 78.351562 67.695312 L 66.601562 11.445312 C 63.101562 12.445312 59.351562 24.445312 59.851562 35.945312 C 59.851562 35.945312 65.601562 68.195312 66.351562 69.695312 L 78.351562 67.695312 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 783.515625 28.346875 L 666.015625 590.846875 C 631.015625 580.846875 593.515625 460.846875 598.515625 345.846875 C 598.515625 345.846875 656.015625 23.346875 663.515625 8.346875 L 783.515625 28.346875 Z M 783.515625 28.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 866.71875 486.901562 C 876.054688 489.284375 881.71875 498.776562 879.335938 508.1125 C 876.953125 517.448437 867.460938 523.1125 858.085938 520.729687 C 848.75 518.346875 843.125 508.815625 845.507812 499.479687 C 847.890625 490.14375 857.382812 484.51875 866.71875 486.901562 Z M 866.71875 486.901562 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 780.703125 439.245312 C 820.390625 283.620312 1004.335938 331.198437 965.546875 483.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 88.808594 30.210938 C 94.367188 28.792969 97.722656 23.140625 96.304688 17.582031 C 94.886719 12.023438 89.230469 8.667969 83.671875 10.085938 C 78.117188 11.503906 74.761719 17.160156 76.179688 22.71875 C 77.597656 28.273438 83.253906 31.632812 88.808594 30.210938 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 888.085938 403.190625 C 943.671875 417.370312 977.226562 473.89375 963.046875 529.479687 C 948.867188 585.065625 892.304688 618.620312 836.71875 604.440625 C 781.171875 590.260937 747.617188 533.698437 761.796875 478.1125 C 775.976562 422.565625 832.539062 388.971875 888.085938 403.190625 Z M 888.085938 403.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 4.203125 66.976562 L 15.382812 13.339844 L 13.886719 11.847656 L 1.890625 66.734375 L 4.203125 66.976562 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 8.769531 67.679688 L 18.527344 21.492188 L 17.082031 17.050781 L 6.570312 67.238281 L 8.769531 67.679688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 12.925781 68.292969 L 19.410156 35.417969 L 19.398438 26.625 L 10.847656 68 L 12.925781 68.292969 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 75.957031 66.789062 L 65.277344 13.527344 L 66.902344 11.597656 L 78.144531 66.296875 L 75.957031 66.789062 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 71.707031 67.179688 L 62.070312 21.617188 L 63.515625 17.175781 L 73.777344 67.113281 L 71.707031 67.179688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(98.431373%,74.096284%,30.606546%);fill-opacity:1;" d="M 67.300781 67.980469 L 60.6875 34.230469 L 61.140625 26.8125 L 69.25 67.6875 L 67.300781 67.980469 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 76.917969 18.679688 L 79.792969 26.804688 C 76.292969 25.367188 76.105469 20.054688 76.917969 18.679688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 78.417969 14.492188 L 83.292969 29.492188 L 87.542969 29.992188 L 81.167969 11.804688 L 78.417969 14.492188 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 84.730469 10.304688 L 91.480469 28.367188 L 94.542969 25.617188 L 88.792969 10.554688 L 84.730469 10.304688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,41.248188%,70.611124%);fill-opacity:1;" d="M 95.488281 21.273438 L 92.597656 13.152344 C 96.226562 15.082031 96.421875 20.394531 95.488281 21.273438 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
const svgXmlWithRGBA = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="97.59pt" height="70.53pt" viewBox="0 0 97.59 70.53" version="1.1">
|
||||
<defs>
|
||||
<clipPath id="clip1">
|
||||
<path d="M 0 70.53125 L 97.589844 70.53125 L 97.589844 0.03125 L 0 0.03125 L 0 70.53125 Z M 0 70.53125 "/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="surface0">
|
||||
<g clip-path="url(#clip1)" clip-rule="nonzero">
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(100%,100%,100%, 0.8);fill-opacity:1;" d="M 13.019531 11.28125 C 13.019531 11.28125 18.101562 14.53125 19.601562 29.863281 C 19.601562 29.863281 19.601562 44.863281 19.601562 70.03125 L 59.894531 70.03125 L 59.894531 29.695312 C 59.894531 29.695312 61.683594 14.695312 66.644531 11.28125 L 49.644531 4.53125 L 49.644531 0.53125 C 49.644531 0.53125 39.753906 -0.304688 39.753906 6.53125 C 39.753906 6.53125 40.769531 0.53125 30.019531 0.53125 L 30.019531 4.53125 L 13.019531 11.28125 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 130.195312 592.4875 C 130.195312 592.4875 181.015625 559.9875 196.015625 406.667187 C 196.015625 406.667187 196.015625 256.667187 196.015625 4.9875 L 598.945312 4.9875 L 598.945312 408.346875 C 598.945312 408.346875 616.835938 558.346875 666.445312 592.4875 L 496.445312 659.9875 L 496.445312 699.9875 C 496.445312 699.9875 397.539062 708.346875 397.539062 639.9875 C 397.539062 639.9875 407.695312 699.9875 300.195312 699.9875 L 300.195312 659.9875 L 130.195312 592.4875 Z M 130.195312 592.4875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 40.019531 51.917969 C 49.390625 51.917969 56.988281 44.320312 56.988281 34.945312 C 56.988281 25.574219 49.390625 17.976562 40.019531 17.976562 C 30.644531 17.976562 23.046875 25.574219 23.046875 34.945312 C 23.046875 44.320312 30.644531 51.917969 40.019531 51.917969 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 126.015625 8.346875 C 133.515625 23.346875 193.515625 345.846875 193.515625 345.846875 C 198.515625 460.846875 163.515625 578.346875 128.515625 588.346875 L 6.015625 28.346875 L 126.015625 8.346875 Z M 126.015625 8.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 783.515625 28.346875 L 666.015625 590.846875 C 631.015625 580.846875 593.515625 460.846875 598.515625 345.846875 C 598.515625 345.846875 656.015625 23.346875 663.515625 8.346875 L 783.515625 28.346875 Z M 783.515625 28.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 866.71875 486.901562 C 876.054688 489.284375 881.71875 498.776562 879.335938 508.1125 C 876.953125 517.448437 867.460938 523.1125 858.085938 520.729687 C 848.75 518.346875 843.125 508.815625 845.507812 499.479687 C 847.890625 490.14375 857.382812 484.51875 866.71875 486.901562 Z M 866.71875 486.901562 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 780.703125 439.245312 C 820.390625 283.620312 1004.335938 331.198437 965.546875 483.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(69.967193%,69.906157%,69.777981%, 0.8);fill-opacity:1;" d="M 88.808594 30.210938 C 94.367188 28.792969 97.722656 23.140625 96.304688 17.582031 C 94.886719 12.023438 89.230469 8.667969 83.671875 10.085938 C 78.117188 11.503906 74.761719 17.160156 76.179688 22.71875 C 77.597656 28.273438 83.253906 31.632812 88.808594 30.210938 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 888.085938 403.190625 C 943.671875 417.370312 977.226562 473.89375 963.046875 529.479687 C 948.867188 585.065625 892.304688 618.620312 836.71875 604.440625 C 781.171875 590.260937 747.617188 533.698437 761.796875 478.1125 C 775.976562 422.565625 832.539062 388.971875 888.085938 403.190625 Z M 888.085938 403.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 13.019531 11.28125 C 13.019531 11.28125 18.101562 14.53125 19.601562 29.863281 C 19.601562 29.863281 19.601562 44.863281 19.601562 70.03125 L 59.894531 70.03125 L 59.894531 29.695312 C 59.894531 29.695312 61.683594 14.695312 66.644531 11.28125 L 49.644531 4.53125 L 49.644531 0.53125 C 49.644531 0.53125 39.753906 -0.304688 39.753906 6.53125 C 39.753906 6.53125 40.769531 0.53125 30.019531 0.53125 L 30.019531 4.53125 L 13.019531 11.28125 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 130.195312 592.4875 C 130.195312 592.4875 181.015625 559.9875 196.015625 406.667187 C 196.015625 406.667187 196.015625 256.667187 196.015625 4.9875 L 598.945312 4.9875 L 598.945312 408.346875 C 598.945312 408.346875 616.835938 558.346875 666.445312 592.4875 L 496.445312 659.9875 L 496.445312 699.9875 C 496.445312 699.9875 397.539062 708.346875 397.539062 639.9875 C 397.539062 639.9875 407.695312 699.9875 300.195312 699.9875 L 300.195312 659.9875 L 130.195312 592.4875 Z M 130.195312 592.4875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 40.019531 51.917969 C 49.390625 51.917969 56.988281 44.320312 56.988281 34.945312 C 56.988281 25.574219 49.390625 17.976562 40.019531 17.976562 C 30.644531 17.976562 23.046875 25.574219 23.046875 34.945312 C 23.046875 44.320312 30.644531 51.917969 40.019531 51.917969 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 12.601562 69.695312 C 13.351562 68.195312 19.351562 35.945312 19.351562 35.945312 C 19.851562 24.445312 16.351562 12.695312 12.851562 11.695312 L 0.601562 67.695312 L 12.601562 69.695312 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 126.015625 8.346875 C 133.515625 23.346875 193.515625 345.846875 193.515625 345.846875 C 198.515625 460.846875 163.515625 578.346875 128.515625 588.346875 L 6.015625 28.346875 L 126.015625 8.346875 Z M 126.015625 8.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 78.351562 67.695312 L 66.601562 11.445312 C 63.101562 12.445312 59.351562 24.445312 59.851562 35.945312 C 59.851562 35.945312 65.601562 68.195312 66.351562 69.695312 L 78.351562 67.695312 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 783.515625 28.346875 L 666.015625 590.846875 C 631.015625 580.846875 593.515625 460.846875 598.515625 345.846875 C 598.515625 345.846875 656.015625 23.346875 663.515625 8.346875 L 783.515625 28.346875 Z M 783.515625 28.346875 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 866.71875 486.901562 C 876.054688 489.284375 881.71875 498.776562 879.335938 508.1125 C 876.953125 517.448437 867.460938 523.1125 858.085938 520.729687 C 848.75 518.346875 843.125 508.815625 845.507812 499.479687 C 847.890625 490.14375 857.382812 484.51875 866.71875 486.901562 Z M 866.71875 486.901562 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style="fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 780.703125 439.245312 C 820.390625 283.620312 1004.335938 331.198437 965.546875 483.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 88.808594 30.210938 C 94.367188 28.792969 97.722656 23.140625 96.304688 17.582031 C 94.886719 12.023438 89.230469 8.667969 83.671875 10.085938 C 78.117188 11.503906 74.761719 17.160156 76.179688 22.71875 C 77.597656 28.273438 83.253906 31.632812 88.808594 30.210938 "/>
|
||||
<path style="fill:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 888.085938 403.190625 C 943.671875 417.370312 977.226562 473.89375 963.046875 529.479687 C 948.867188 585.065625 892.304688 618.620312 836.71875 604.440625 C 781.171875 590.260937 747.617188 533.698437 761.796875 478.1125 C 775.976562 422.565625 832.539062 388.971875 888.085938 403.190625 Z M 888.085938 403.190625 " transform="matrix(0.1,0,0,-0.1,0,70.53)"/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 4.203125 66.976562 L 15.382812 13.339844 L 13.886719 11.847656 L 1.890625 66.734375 L 4.203125 66.976562 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 8.769531 67.679688 L 18.527344 21.492188 L 17.082031 17.050781 L 6.570312 67.238281 L 8.769531 67.679688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 12.925781 68.292969 L 19.410156 35.417969 L 19.398438 26.625 L 10.847656 68 L 12.925781 68.292969 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 75.957031 66.789062 L 65.277344 13.527344 L 66.902344 11.597656 L 78.144531 66.296875 L 75.957031 66.789062 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 71.707031 67.179688 L 62.070312 21.617188 L 63.515625 17.175781 L 73.777344 67.113281 L 71.707031 67.179688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(98.431373%,74.096284%,30.606546%, 0.8);fill-opacity:1;" d="M 67.300781 67.980469 L 60.6875 34.230469 L 61.140625 26.8125 L 69.25 67.6875 L 67.300781 67.980469 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 76.917969 18.679688 L 79.792969 26.804688 C 76.292969 25.367188 76.105469 20.054688 76.917969 18.679688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 78.417969 14.492188 L 83.292969 29.492188 L 87.542969 29.992188 L 81.167969 11.804688 L 78.417969 14.492188 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 84.730469 10.304688 L 91.480469 28.367188 L 94.542969 25.617188 L 88.792969 10.554688 L 84.730469 10.304688 "/>
|
||||
<path style=" stroke:none;fill-rule:nonzero;fill:rgba(0%,41.248188%,70.611124%, 0.8);fill-opacity:1;" d="M 95.488281 21.273438 L 92.597656 13.152344 C 96.226562 15.082031 96.421875 20.394531 95.488281 21.273438 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
export default function Test2363() {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<SvgXml xml={svgXmlWithRGB} />
|
||||
<View style={{height: 30}}/>
|
||||
<SvgXml xml={svgXmlWithRGBA} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { ColorValue } from 'react-native';
|
||||
import { processColor } from 'react-native';
|
||||
import { convertPercentageColor } from '../utils/convertPercentageColor';
|
||||
|
||||
const urlIdPattern = /^url\(#(.+)\)$/;
|
||||
|
||||
@@ -29,7 +30,9 @@ export default function extractBrush(color?: ColorValue) {
|
||||
return { type: 1, brushRef: brush[1] };
|
||||
}
|
||||
|
||||
const processedColor = processColor(color);
|
||||
// Convert percentage RGB/RGBA color to standard RGB/RGBA color
|
||||
const colorToProcess = convertPercentageColor(color);
|
||||
const processedColor = processColor(colorToProcess);
|
||||
if (typeof processedColor === 'number') {
|
||||
return { type: 0, payload: processedColor };
|
||||
}
|
||||
|
||||
41
src/lib/utils/convertPercentageColor.ts
Normal file
41
src/lib/utils/convertPercentageColor.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { ColorValue } from 'react-native';
|
||||
|
||||
export const RGB_RGBA_PATTERN =
|
||||
/^rgba?\(\s*(100%|\d{1,2}(\.\d+)?%)\s*,\s*(100%|\d{1,2}(\.\d+)?%)\s*,\s*(100%|\d{1,2}(\.\d+)?%)\s*(?:,\s*(1|0(\.\d+)?|100%|\d{1,2}(\.\d+)?%)\s*)?\)$/;
|
||||
|
||||
const percentTo255 = (percent: string) =>
|
||||
Math.round(parseFloat(percent) * 2.55);
|
||||
|
||||
const parseAlpha = (alpha: string) =>
|
||||
alpha.endsWith('%') ? parseFloat(alpha) / 100 : parseFloat(alpha);
|
||||
|
||||
function parsePercentageRGBColor(color: string): string {
|
||||
const currentMatch = RGB_RGBA_PATTERN.exec(color);
|
||||
|
||||
if (!currentMatch) {
|
||||
console.warn(`"${color}" is not a valid percentage rgb/rgba color`);
|
||||
return color;
|
||||
}
|
||||
|
||||
const red = currentMatch[1];
|
||||
const green = currentMatch[3];
|
||||
const blue = currentMatch[5];
|
||||
const alpha = currentMatch[7];
|
||||
|
||||
const rgb = `${percentTo255(red)}, ${percentTo255(green)}, ${percentTo255(
|
||||
blue
|
||||
)}`;
|
||||
|
||||
return alpha ? `rgba(${rgb}, ${parseAlpha(alpha)})` : `rgb(${rgb})`;
|
||||
}
|
||||
|
||||
export const convertPercentageColor = (color: ColorValue) => {
|
||||
if (typeof color !== 'string') {
|
||||
return color;
|
||||
}
|
||||
const rgbColorWithoutSpaces = color.replace(/\s/g, '');
|
||||
const isPercentageRgb = RGB_RGBA_PATTERN.test(rgbColorWithoutSpaces);
|
||||
return isPercentageRgb
|
||||
? parsePercentageRGBColor(rgbColorWithoutSpaces)
|
||||
: color;
|
||||
};
|
||||
Reference in New Issue
Block a user