Svg

SVG: which elements are SVG's, and a style patch split into the CSS an SVG element takes and the attributes it takes instead. An <svg> root is styled as HTML is; an element inside it takes most keys as attributes, and a transform about its own centre, as an HTML element's is.

import * as Svg from "@wardic/dom/Svg"

Svg.splitPatchForTag("circle", { r: 10, opacity: 0.5, transform: "scale(2)" })
// style: transform, transform-box and transform-origin; attrs: { r: "10", opacity: "0.5" }

Interfaces

SplitPatch

A style patch, split: the keys written as CSS, and the ones written as attributes.

Properties

attrs

readonly attrs: Readonly<Record<string, string>>;

The keys written with setAttribute: none for HTML and an <svg> root.

style

readonly style: Readonly<Record<string, unknown>>;

The keys written as CSS: the whole patch for HTML and an <svg> root, the very object given.

Functions

isInner()

function isInner(el): boolean;

Whether el is an SVG element inside an <svg>: any SVG element but the root.

Parameters

el

unknown

Returns

boolean

isInnerTag()

function isInnerTag(tag): boolean;

Whether tag names an SVG element inside an <svg>, by its name alone.

Parameters

tag

string

Returns

boolean

isRoot()

function isRoot(el): boolean;

Whether el is an <svg> root, which is styled as HTML is: it has a CSS box.

Parameters

el

unknown

Returns

boolean

setAttrs()

function setAttrs(el, attrs): void;

Writes each attribute onto el with setAttribute; nothing for an empty map.

Parameters

el

Element

attrs

Readonly<Record<string, string>>

Returns

void

splitPatch()

function splitPatch(el, patch): SplitPatch;

A style patch split for el: an HTML element's, or an <svg> root's, is all style. An SVG element inside one takes every key as an attribute but the keys CSS styles and a custom property; attrX, attrY and attrScale as its x, y and scale attributes; a transform with transform-box: fill-box and transform-origin: 50% 50%, unless the values set them, so it turns about its own centre as an HTML element does; and pathLength, pathSpacing and pathOffset as a normalised stroke-dasharray and stroke-dashoffset, with pathLength="1".

function splitPatchForTag(tag, patch): SplitPatch;

splitPatch by tag name, for where there's no element yet: a server render, a starting style. undefined is an HTML element.