mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-07 16:54:52 +00:00
feat: add FeOffset filter (#2361)
# Summary Continuation of #2316 Introducing new filter `FeOffset`. ## Test Plan Example app -> Filters -> FeOffset ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ✅ | ## Checklist - [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)
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
import React, {Component} from 'react';
|
||||
import {FeOffset, Filter, Rect, Svg} from 'react-native-svg';
|
||||
|
||||
class ReferenceExample extends Component {
|
||||
static title = 'Offset';
|
||||
render() {
|
||||
return (
|
||||
<Svg width="200" height="200">
|
||||
<Filter id="offset" width="180" height="180">
|
||||
<FeOffset dx="50" dy="50" />
|
||||
</Filter>
|
||||
|
||||
<Rect x="0" y="0" width="100" height="100" stroke="black" fill="red" />
|
||||
<Rect x="0" y="0" width="50" height="50" stroke="black" fill="none" />
|
||||
<Rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100"
|
||||
height="100"
|
||||
stroke="black"
|
||||
fill="blue"
|
||||
filter="url(#offset)"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const icon = (
|
||||
<Svg height="30" width="30" viewBox="0 0 20 20">
|
||||
<Filter id="iconOffset">
|
||||
<FeOffset dx="5" dy="5" />
|
||||
</Filter>
|
||||
<Rect x="0" y="0" width="15" height="15" fill="red" />
|
||||
<Rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="blue"
|
||||
filter="url(#iconOffset)"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
const samples = [ReferenceExample];
|
||||
export {icon, samples};
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as FeColorMatrix from './FeColorMatrix';
|
||||
import * as FeGaussianBlur from './FeGaussianBlur';
|
||||
import * as FeOffset from './FeOffset';
|
||||
import * as ReanimatedFeColorMatrix from './ReanimatedFeColorMatrix';
|
||||
export {FeColorMatrix, FeGaussianBlur, ReanimatedFeColorMatrix};
|
||||
export {FeColorMatrix, FeGaussianBlur, FeOffset, ReanimatedFeColorMatrix};
|
||||
|
||||
Reference in New Issue
Block a user