@ng-blue-duct-tape/svg-draw-stroke

Angular library that allows you to access elements inside SVG for further animation

Usage no npm install needed!

<script type="module">
  import ngBlueDuctTapeSvgDrawStroke from 'https://cdn.skypack.dev/@ng-blue-duct-tape/svg-draw-stroke';
</script>

README

npm (scoped) Badge

Split Text

SVG-DRAW-STROKE - Angular library that allows you to access the SVG child elements that have the "stroke-width" attribute and get the total length.

Features

  • Access all elements that have a stroke-width
  • Manual init
  • Set stroke-linecap (for elements that do not have this attribute)
  • Set stroke-linecap for all (set attribute for all elements)

Getting started

Step 1: Install @ng-blue-duct-tape/svg-draw-stroke (npm):

npm i @ng-blue-duct-tape/svg-draw-stroke

Step 2: Import SvgDrawStrokeModule:

import { SvgDrawStrokeModule } from '@ng-blue-duct-tape/svg-draw-stroke';

@NgModule({
  declarations: [AppComponent],
  imports: [SvgDrawStrokeModule],
  bootstrap: [AppComponent]
})

export class AppModule {}

Step 3: Add directive bdtSvgDrawStroke to svg element and template ID to reference this Directive in Component (example: #svgEl):

<svg
  #svgEl
  bdtSvgDrawStroke
  width="850"
  height="206"
  viewBox="0 0 850 206"
  fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M299.175 82.897C664.197-22.49 319.645-19.185 30.993 59.737c-51.34 14.036-78.064 60.684 311.515 54.002 560.074-9.607 462.987 20.77 432.978 30.117-169.18 49.014-29.579 61.099 72.514 60.087"
    stroke="#EB4626"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"/>
</svg>

Step 4: Add @ViewChild to access svg child elements by previously assigned ID:

@ViewChild('svgEl', { read: SvgDrawStrokeDirective }) svgEl: SvgDrawStrokeDirective;

Step 5: Init animation (Example for GSAP):

export class AppComponent implements AfterViewInit {
  @ViewChild('svgEl', { read: SvgDrawStrokeDirective }) svgEl: SvgDrawStrokeDirective;
  tlSvg = gsap.timeline();
  
  constructor() {}
  
  ngAfterViewInit(): void {
    this.svgAnimation();
  }

  svgAnimation(): void {
    const strokeElement = this.svgEl.stokeElements[0];
    this.tlSvg
      .clear()
      .fromTo(
        strokeElement.element,
        {
          strokeDashoffset: strokeElement.strokeTotal,
        },
        {
          strokeDashoffset: 0,
          duration: 1,
          ease: Power2.easeInOut,
        },
      );
  }
}

API

Directives

Name Description
bdtSvgDrawStroke Get SVG child elements

Inputs

Name Type Default Description
manualInit boolean false Manual initiation init()
strokeLinecap 'butt' / 'round' / 'square' / false 'round' Set strokeLinecap for elements without attribute
strokeLinecapAll boolean false Set strokeLinecap attribute for all elements

Properties

Name Type Description
nativeElement SVGElement / undefined Container SVGElement (if element type is not SVGElement - nativeElement === undefined)
stokeElements StrokeElement[] Svg child elements (StrokeElement custom Interface)

Methods

Name Description
init() Init. For using in case [manualInit]="true"