https://github.com/bmartinson/ngx-x-browser-svg-mask
ngx directive to easily achieve cross browser compliance while creating SVG masks.
https://github.com/bmartinson/ngx-x-browser-svg-mask
angular cross-browser directive easy-to-use mask simplicity svg ui ui-ux user-experience ux
Last synced: about 2 months ago
JSON representation
ngx directive to easily achieve cross browser compliance while creating SVG masks.
- Host: GitHub
- URL: https://github.com/bmartinson/ngx-x-browser-svg-mask
- Owner: bmartinson
- License: mit
- Created: 2019-08-19T02:11:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T03:46:34.000Z (3 months ago)
- Last Synced: 2025-02-26T12:42:57.997Z (2 months ago)
- Topics: angular, cross-browser, directive, easy-to-use, mask, simplicity, svg, ui, ui-ux, user-experience, ux
- Language: TypeScript
- Homepage:
- Size: 3.74 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-x-browser-svg-mask - Directive to easily achieve cross browser compliance while creating SVG masks. (Table of contents / Third Party Components)
- awesome-angular - ngx-x-browser-svg-mask - Directive to easily achieve cross browser compliance while creating SVG masks. (Table of contents / Third Party Components)
README
# ngx-x-browser-svg-mask
Angular attribute directive that handles cross browser considerations for applying SVG image masks in the DOM.
## Table of contents
- [Table of contents](#table-of-contents)
- [About This Package](#about-this-package)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
## About This Package
This package provides a directive for Angular 2+ that helps handle some of the cross browser specifics involved with creating SVG masks. When it comes to compositing an SVG using a base image and a mask image, each browser requires slightly different properties and some (Safari) require a specific path structure for the mask reference. To ease the burden of creating many SVG masks in your application, applying this directive will help you not have to worry about any of the specifics and generate SVG masks with minimal attribute assignment.
## Installation
`npm install ngx-x-browser-svg-mask --save`
## Usage
1. Import `NgxXBrowserSVGMaskModule` in your app module (or other Angular module) and place it in your imports section:
```typescript
import { NgxXBrowserSVGMaskModule } from "ngx-x-browser-svg-mask";
@NgModule({
imports: [
...,
NgxXBrowserSVGMaskModule,
],
...
})
export class AppModule { }
```
2. Use the `ngxSVGMask` directive on image elements to provide a reference to your SVG mask in a cross browser friendly way.
```
```
## API
### Input Properties
`ngxSVGMask` {string}
- The `HTMLElement` id associated with the `mask` node that will be used to mask the bitmap element.