@ng-blue-duct-tape/svg-draw-stroke v0.0.9

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

Inputs

Properties

Methods