This project is part of the @thi.ng/umbrella monorepo.
SVG element functions for @thi.ng/hiccup & @thi.ng/hdom.
This package's functionality was formerly part of @thi.ng/hdom-components, but has been extracted to remain more focused.
The functions provided here do produce valid hiccup elements, but since none of them make use of (or support) the global hiccup / hdom context object, they can ONLY be invoked directly, i.e. they MUST be called like:
// correct (direct invocation)
svg.svg(svg.circle([0, 0], 100, { fill: "red" }));
// incorrect / unsupported (lazy evaluation)
[svg.svg, [svg.circle, [0, 0], 100, { fill: "red" }]]yarn add @thi.ng/hiccup-svgimport * as svg from "@thi.ng/hiccup-svg";
import { serialize } from "@thi.ng/hiccup";
import * as fs from "fs";
fs.writeFileSync("hello.svg",
serialize(
svg.svg(
{width: 100, height: 100},
svg.defs(svg.linearGradient("grad", 0, 0, 0, 1, [[0, "red"], [1, "blue"]])),
svg.circle([50, 50], 50, {fill: "url(#grad)"}),
svg.text("Hello", [50, 55], { fill: "white", "text-anchor": "middle"})
)
));- Karsten Schmidt
© 2016 - 2018 Karsten Schmidt // Apache Software License 2.0