Nationwide Polyamorous Matrimony

npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

ngx-x-browser-svg-mask

1.0.1 • Public • Published

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.

install

npm i ngx-x-browser-svg-mask

Downloadsweekly downloads

2

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability