Skip to content
ngx directive to easily achieve cross browser compliance while creating SVG masks.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
projects/ngx-x-browser-svg-mask
src
.angulardoc.json
.editorconfig
.gitignore
README.md
angular.json
browserslist
karma.conf.js
package-lock.json
package.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

README.md

ngx-x-browser-svg-mask npm version npm downloads

Angular attribute directive that handles cross browser considerations for applying SVG image masks in the DOM.

Table of contents

  1. About This Package
  2. Installation
  3. Usage
  4. 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:

    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.

     <svg version="1.2">
        <mask id="elm-tree-mask">
          <image [attr.xlink:href]="'./assets/elm-tree.svg'"
                  preserveAspectRatio="xMidYMid slice"
                  [attr.width]="'100%'"
                  [attr.height]="'100%'">
          </image>
        </mask>
    
        <image width="500"
                height="338"
                [ngxSVGMask]="'#elm-tree-mask'"
                [attr.xlink:href]="'./assets/salmon-catch.jpg'">
        </image>
      </svg>
    

API

Input Properties

ngxSVGMask {string}

  • The HTMLElement id associated with the mask node that will be used to mask the bitmap element.
You can’t perform that action at this time.