KristofferStrube.Blazor.SVGAnimation 0.1.0

Introduction

A Blazor WASM wrapper for the SVG Animation browser API.

With the wrapper we can begin, end, subscribe to events and see the status of SVG Animations from Blazor WASM without writing any JS.

The specs for the API can be found at https://svgwg.org/specs/animations/#IDL

Demo

The sample project can be demoed at https://kristofferstrube.github.io/Blazor.SVGAnimation/

On each page you can find the corresponding code for the example in the top right corner.

On the main page you can see if the API has at least minimal support in the used browser.

Getting Started

Prerequisites

You need to install .NET 6.0 or newer to use the library.

Download .NET 6

Installation

You can install the package via Nuget with the Package Manager in your IDE or alternatively using the command line:

dotnet add package KristofferStrube.Blazor.SVGAnimation

Usage

The package can be used in Blazor WebAssembly projects.

Import

You also need to reference the package in order to use it in your pages. This can be done in _Import.razor by adding the following.

@using KristofferStrube.Blazor.SVGAnimation

Add to service collection

An easy way to make the service available in all your pages is by registering it in the IServiceCollection so that it can be dependency injected in the pages that need it. This is done in Program.cs by adding the following before you build the host and run it.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// Other services are added.

builder.Services.AddSVGAnimationService();

await builder.Build().RunAsync();

Inject in page

Then the service can be injected in a page like so:

@inject ISVGAnimationService SVGAnimationService;

Then you can use SVGAnimationService to wrap an animate, set, animateMotion, mpath, animateTransform, or discard element like so:

<svg width="100px" height="100px">
    <rect @onclick="OnClick"
          x="20"
          y="10"
          width="60"
          height="80"
          fill="yellow">
        <animate @ref="elementReference"
                    attributeName="fill"
                    values="yellow;green"
                    begin="indefinite"
                    dur="3s"
                    fill="freeze" />
    </rect>
</svg>

@code {
    protected ElementReference elementReference { get; set; }
    protected SVGAnimationElement animation;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            animation = await SVGAnimationService.GreateSVGAnimationElement(elementReference);
        }
    }

    private async void OnClick()
    {
        await animation.BeginElementAsync();
    }
}

Issues

Feel free to open issues on the repository if you find any errors with the package or have wishes for features.

Related articles

This repository was build with inspiration and help from the following series of articles:

• Wrapping JavaScript libraries in Blazor WebAssembly/WASM
• Call anonymous C# functions from JS in Blazor WASM
• Using JS Object References in Blazor WASM to wrap JS libraries
• Blazor WASM 404 error and fix for GitHub Pages
• How to fix Blazor WASM base path problems