{"id":26280082,"url":"https://github.com/kristofferstrube/blazor.svganimation","last_synced_at":"2025-07-28T07:09:07.833Z","repository":{"id":109456191,"uuid":"490775566","full_name":"KristofferStrube/Blazor.SVGAnimation","owner":"KristofferStrube","description":"A Blazor wrapper for the SVG Animation browser API","archived":false,"fork":false,"pushed_at":"2024-08-04T10:15:25.000Z","size":7892,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-19T22:25:57.460Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KristofferStrube.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-10T16:22:16.000Z","updated_at":"2024-08-04T10:14:39.000Z","dependencies_parsed_at":"2023-12-21T19:04:02.893Z","dependency_job_id":null,"html_url":"https://github.com/KristofferStrube/Blazor.SVGAnimation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KristofferStrube/Blazor.SVGAnimation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KristofferStrube","download_url":"https://codeload.github.com/KristofferStrube/Blazor.SVGAnimation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.SVGAnimation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267476250,"owners_count":24093464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-14T14:18:35.301Z","updated_at":"2025-07-28T07:09:07.810Z","avatar_url":"https://github.com/KristofferStrube.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/KristofferStrube/Blazor.SVGAnimation)](https://github.com/KristofferStrube/Blazor.SVGAnimation/issues)\n[![GitHub forks](https://img.shields.io/github/forks/KristofferStrube/Blazor.SVGAnimation)](https://github.com/KristofferStrube/Blazor.SVGAnimation/network/members)\n[![GitHub stars](https://img.shields.io/github/stars/KristofferStrube/Blazor.SVGAnimation)](https://github.com/KristofferStrube/Blazor.SVGAnimation/stargazers)\n\n[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/KristofferStrube.Blazor.SVGAnimation?label=NuGet%20Downloads)](https://www.nuget.org/packages/KristofferStrube.Blazor.SVGAnimation/)\n\n# Introduction\nA Blazor WASM wrapper for the SVG Animation browser API.\n\nWith the wrapper, we can listen to the `begin`, `end`, and `repeat` events, see the status of SVG Animations, and start and stop animations at specific times from Blazor.\n\nThe specs for the API can be found at https://svgwg.org/specs/animations/#IDL\n\n## Demo\nThe sample project can be demoed at https://kristofferstrube.github.io/Blazor.SVGAnimation/\n\nOn each page, you can find the corresponding code for the example in the top right corner.\n\n# Getting Started\n## Prerequisites\nYou need to install .NET 7.0 or newer to use the library.\n\n[Download .NET 7](https://dotnet.microsoft.com/download/dotnet/7.0)\n\n## Installation\nYou can install the package via Nuget with the Package Manager in your IDE or using the command line:\n```bash\ndotnet add package KristofferStrube.Blazor.SVGAnimation\n```\n\n# Usage\nThe package can be used in all Blazor projects.\n## Import\nYou 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.\n```razor\n@using KristofferStrube.Blazor.SVGAnimation\n```\n\n## Creating wrapper instances\nThe primary part of this library is a wrapper class for `SVGAnimationElement`s which can be instantiated from your code using the static `CreateAsync` methods on the wrapper class.\n```razor\n@inject IJSRuntime JSRuntime\n\n\u003csvg width=\"100px\" height=\"100px\"\u003e\n    \u003crect @onclick=\"SquareClicked\"\n          width=\"100\"\n          height=\"100\"\n          fill=\"red\"\u003e\n        \u003canimate @ref=\"colorAnimationElementReference\"\n                 attributeName=\"fill\"\n                 values=\"red;yellow;red\"\n                 begin=\"indefinite\"\n                 dur=\"3s\" /\u003e\n    \u003c/rect\u003e\n\u003c/svg\u003e\n\n@code {\n    private ElementReference colorAnimationElementReference = default!;\n\n    private async void SquareClicked()\n    {\n        SVGAnimationElement colorAnimationElement = await SVGAnimationElement.CreateAsync(JSRuntime, colorAnimationElementReference);\n        await colorAnimationElement.BeginElementAsync();\n    }\n}\n```\nYou can also use a `SVGAnimationElement` to listen for the `beginEvent`, `endEvent`, and `repeatEvent` events. The following is an example of listening for when a repeat event happens.\n```razor\n@using KristofferStrube.Blazor.DOM\n@implements IAsyncDisposable\n@inject IJSRuntime JSRuntime\n\n\u003cb\u003eNumber of repeats: \u003c/b\u003e @repeats\n\u003cbr /\u003e\n\u003csvg width=\"100px\" height=\"100px\"\u003e\n    \u003crect @onclick=\"SquareClicked\"\n          width=\"100\"\n          height=\"100\"\n          fill=\"red\"\u003e\n        \u003canimate @ref=\"colorAnimationElementReference\"\n                 attributeName=\"fill\"\n                 values=\"red;yellow;red\"\n                 begin=\"indefinite\"\n                 repeatCount=\"indefinite\"\n                 dur=\"1s\" /\u003e\n    \u003c/rect\u003e\n\u003c/svg\u003e\n\n@code {\n    private ElementReference colorAnimationElementReference = default!;\n    private SVGAnimationElement colorAnimationElement = default!;\n    private EventListener\u003cEvent\u003e repeatListener = default!;\n    private int repeats = 0;\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (!firstRender) return;\n        colorAnimationElement = await SVGAnimationElement.CreateAsync(JSRuntime, colorAnimationElementReference);\n        repeatListener = await colorAnimationElement.AddOnRepeatEventListenerAsync(_ =\u003e\n        {\n            repeats++;\n            StateHasChanged();\n            return Task.CompletedTask;\n        });\n    }\n\n    private async void SquareClicked()\n    {\n        await colorAnimationElement.BeginElementAsync();\n    }\n\n    public async ValueTask DisposeAsync()\n    {\n        await colorAnimationElement.RemoveOnRepeatEventListenerAsync(repeatListener);\n    }\n}\n```\n\n# Issues\nFeel free to open issues on the repository if you find any errors with the package or have wishes for features.\n\n# Related articles\nThis repository was built with inspiration and help from the following series of articles:\n\n- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)\n- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)\n- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)\n- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)\n- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.svganimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofferstrube%2Fblazor.svganimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.svganimation/lists"}