zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-28 04:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: FeFlood (#2487)

Browse Source 
# Summary

Continuation of #2362 implementing `FeFlood` filter
https://www.w3.org/TR/SVG11/filters.html#feFloodElement

## Test Plan

Example app → Filters → `FeFlood`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| macOS   |    ✅ _*_      |
| Android |    ✅      |
| Web     |    ✅      |

_* `canvasWidth/canvasHeight` is incorrect on macOS, so there might be
some problems_
This commit is contained in:
Jakub Grzywacz
2024-10-15 09:35:13 +02:00
committed by GitHub
parent 8fed77476b
commit ba54b15799
17 changed files with 581 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/examples/src/examples/Filters/FeFlood.tsx
+141
View File
@@ -0,0 +1,141 @@
import React, {Component} from 'react';
import {
Circle,
FeFlood,
FeMerge,
FeMergeNode,
Filter,
G,
Line,
Rect,
Svg,
Use,
} from 'react-native-svg';
class BasicFlood extends Component {
static title = 'Basic MDN example with Use';
render() {
return (
<Svg width="200" height="200">
<Filter id="floodFilter" filterUnits="userSpaceOnUse">
<FeFlood
x="50"
y="50"
width="100"
height="100"
floodColor="green"
floodOpacity="0.5"
/>
</Filter>
<Use href="url(#useless)" filter="url(#floodFilter)" />
</Svg>
);
}
}
class TestCase1 extends Component {
static title = 'Custom Test Case 1';
render() {
return (
<Svg width="200" height="200" viewBox="0 0 200 200">
<Filter
id="floodFilter"
// x="50%"
filterUnits="userSpaceOnUse"
primitiveUnits="userSpaceOnUse">
<FeFlood
// y="-10%"
x="10%"
// width="50%"
// height="50%"
flood-color="red"
flood-opacity="0.5"
floodColor="yellow"
floodOpacity="0.5"
/>
</Filter>
<Rect x="0" y="0" width="100" height="100" fill="blue" />
<Circle cx="50" cy="50" r="40" filter="url(#floodFilter)" />
</Svg>
);
}
}
class TestCase2 extends Component {
static title = 'Custom Test Case 2';
render() {
return (
<Svg width="200" height="400">
<Filter
id="flood"
x="0"
y="0"
width="100%"
height="100%"
primitiveUnits="objectBoundingBox">
<FeFlood
x="25%"
y="25%"
width="50%"
height="50%"
floodColor="green"
floodOpacity="0.75"
/>
</Filter>
<Filter id="merge" primitiveUnits="objectBoundingBox">
<FeMerge x="25%" y="25%" width="50%" height="50%">
<FeMergeNode in="SourceGraphic" />
</FeMerge>
</Filter>
<G fill="none" stroke="blue" strokeWidth="4">
<Rect width="200" height="200" />
<Line x2="200" y2="200" />
<Line x1="200" y2="200" />
</G>
<Circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90" />
<Rect x="55" y="55" width="90" height="90" />
<G transform="translate(0 200)">
<G fill="none" stroke="blue" strokeWidth="4">
<Rect width="200" height="200" />
<Line x2="200" y2="200" />
<Line x1="200" y2="200" />
</G>
<Circle
fill="green"
fillOpacity="0.5"
filter="url(#merge)"
cx="100"
cy="100"
r="90"
/>
</G>
<Rect x="55" y="255" width="90" height="90" fillOpacity=".7" />
</Svg>
);
}
}
const icon = (
<Svg height="30" width="30" viewBox="0 0 140 140">
<Filter
id="floodFilterIcon"
x="50%"
filterUnits="userSpaceOnUse"
primitiveUnits="userSpaceOnUse">
<FeFlood
y="-10%"
x="10%"
width="50%"
height="50%"
floodColor="yellow"
floodOpacity="0.5"
/>
</Filter>
<Rect x="0" y="0" width="100" height="100" fill="blue" />
<Circle cx="50" cy="50" r="40" filter="url(#floodFilterIcon)" />
</Svg>
);
const samples = [BasicFlood, TestCase1, TestCase2];
export {icon, samples};
apps/examples/src/examples/Filters/examples.tsx
+2
View File
@@ -1,10 +1,12 @@
import * as FeColorMatrix from './FeColorMatrix';
import * as FeFlood from './FeFlood';
import * as FeGaussianBlur from './FeGaussianBlur';
import * as FeMerge from './FeMerge';
import * as FeOffset from './FeOffset';
import * as ReanimatedFeColorMatrix from './ReanimatedFeColorMatrix';
export {
FeColorMatrix,
FeFlood,
FeGaussianBlur,
FeMerge,
FeOffset,