Svg Generator
by
JoeyBuildsGames
| Summary | Allows for generation of SVGs at runtime |
|---|---|
| Description |
Generate SVGs dynamically within your razor! SVG data can be generated dynamically through code, then passed as a string to the SvgGenerator to generate at runtime. The code is based heavily on the already existing Sandbox.SvgPanel. Example use: @using Sandbox; @using Sandbox.UI; @using JBG.UI; @using Sandbox.UI.Navigation @inherits PanelComponent <div class="root"> <SvgGenerator SvgAsString=@SvgString [email protected] class="icon" /> </div> <style> .root { width: 100%; height: 100%; position: relative; } .icon { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; transform: translate(-50%, -50%); } </style> @code { public string SvgString = @"<svg xmlns=""http://www.w3.org/2000/svg""> <path d = ""M12 0C5.39 0 .004 5.388.004 12S5.39 24 12 24s11.996-5.388 11.996-12S18.627 0 12 0zm0 21.314c-5.131 0-9.294-4.164-9.294-9.297C2.706 6.884 6.869 2.72 12 2.72s9.294 4.164 9.294 9.297c0 5.133-4.163 9.297-9.294 9.297zm-.561-10.725-1.92-1.904-1.41 1.411L6.75 8.719l-1.92 1.904L6.206 12l-1.444 1.445 1.92 1.921 1.427-1.445L9.587 15.4l1.92-1.921L10.029 12l1.41-1.411zm7.748-.051-1.41 1.411 1.478 1.479-1.92 1.904-1.478-1.479-1.444 1.445-1.903-1.921 1.444-1.428-1.376-1.377 1.903-1.921 1.376 1.377 1.41-1.411 1.92 1.921z""/></svg >"; protected override int BuildHash() => System.HashCode.Combine(SvgString); }Generate SVGs dynamically within your razor!
SVG data can be generated dynamically through code, then passed as a string to the SvgGenerator to generate at runtime. The code is based heavily on the already existing Sandbox.SvgPanel.
Example use:
@using Sandbox;
@using Sandbox.UI;
@using JBG.UI;
@using Sandbox.UI.Navigation
@inherits PanelComponent
<div class="root">
<SvgGenerator SvgAsString=@SvgString [email protected] class="icon" />
</div>
<style>
.root {
width: 100%;
height: 100%;
position: relative;
}
.icon {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
transform: translate(-50%, -50%);
}
</style>
@code
{
public string SvgString = @"<svg xmlns=""http://www.w3.org/2000/svg"">
<path d = ""M12 0C5.39 0 .004 5.388.004 12S5.39 24 12 24s11.996-5.388 11.996-12S18.627 0 12 0zm0 21.314c-5.131
0-9.294-4.164-9.294-9.297C2.706 6.884 6.869 2.72 12 2.72s9.294 4.164 9.294 9.297c0 5.133-4.163 9.297-9.294
9.297zm-.561-10.725-1.92-1.904-1.41 1.411L6.75 8.719l-1.92 1.904L6.206 12l-1.444 1.445 1.92 1.921 1.427-1.445L9.587
15.4l1.92-1.921L10.029 12l1.41-1.411zm7.748-.051-1.41 1.411 1.478 1.479-1.92 1.904-1.478-1.479-1.444 1.445-1.903-1.921
1.444-1.428-1.376-1.377 1.903-1.921 1.376 1.377 1.41-1.411 1.92 1.921z""/></svg >";
protected override int BuildHash() => System.HashCode.Combine(SvgString);
}
|
| Votes | 👍0 👎0 ❤️0 |
| Error Rate | 0% |
| Data | {} |
Loading history…