Use at your own risk.
Why do?
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.
This project is porting documentation from https://developer.mozilla.org into Golang and many of the examples are taken from it.
How to turn on the local server:
cd examples/server
make build
To see examples:
http://localhost:3000/examples/svg/
Reference/Referência:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion
HTML
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</svg>
Golang
//go:build js
package main
import (
"github.com/helmutkemper/iotmaker.webassembly/browser/factoryBrowser"
"github.com/helmutkemper/iotmaker.webassembly/browser/html"
"github.com/helmutkemper/iotmaker.webassembly/platform/factoryColor"
"time"
)
func main() {
s1 := factoryBrowser.NewTagSvg().ViewBox([]float64{0, 0, 200, 100}).Append(
factoryBrowser.NewTagSvgPath().Fill(nil).Stroke(factoryColor.NewLightgrey()).D(factoryBrowser.NewPath().M(20, 50).C(20, -50, 180, 150, 180, 50).C(180, -50, 20, 150, 20, 50).Z()),
factoryBrowser.NewTagSvgCircle().R(5).Fill(factoryColor.NewRed()).Append(
factoryBrowser.NewTagSvgAnimateMotion().Dur(10*time.Second).RepeatCount(html.KSvgDurIndefinite).Path(factoryBrowser.NewPath().M(20, 50).C(20, -50, 180, 150, 180, 50).C(180, -50, 20, 150, 20, 50).Z()),
),
)
stage := factoryBrowser.NewStage()
stage.Append(s1)
done := make(chan struct{}, 0)
<-done
}
Browser:
How to generate binary file:
cd examples/svg/tags/animateMotion
make build
Example | Date |
---|---|
battery | 07/august/22 |
event/animateMotion | 07/august/22 |
event/feDisplacementMap | 07/august/22 |
event/use | 07/august/22 |
geolocation/getPosition | 07/august/22 |
geolocation/watchPosition | 07/august/22 |
BezierCurve/1_addCurve | 08/august/22 |
BezierCurve/2_addEasingTween | 08/august/22 |
BezierCurve/3_addRipple | 08/august/22 |
canvas/addColorStopPosition | 16/august/22 |
canvas/arc | 16/august/22 |
canvas/arcTo | 16/august/22 |
canvas/beginPath | 16/august/22 |
canvas/bezierCurveTo | 16/august/22 |
canvas/clearRect | 16/august/22 |
canvas/createLinearGradient | 16/august/22 |
canvas/createPattern | 16/august/22 |
canvas/createRadialGradient | 16/august/22 |
canvas/fillRect | 16/august/22 |
canvas/fillText | 16/august/22 |
canvas/font | 16/august/22 |
canvas/globalAlpha | 16/august/22 |
canvas/globalCompositeOperation | 16/august/22 |