@thisotherthing/ops
docspackagessketches

@thisotherthing/ops-svg

Exports

OpsSvgUnitValues

"none"
"em"
"ex"
"px"
"pt"
"pc"
"cm"
"mm"
"in"
"percentages"

createOpsSvg

// Creates an svgCanvas

Parameters

info?
width:number
height:number
units:
none
em
ex
px
pt
pc
cm
mm
in
percentages
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number

Return

OpsSvg

ioOps

getSvgString

Parameters
none
Return
string

layersOps

addLayer

g:
(
group:
(
addLayers:(addLayers: LayerOperations) => void
) => void
optional?:
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number
transform?:
"`matrix(${number} ${number} ${number} ${number} ${number} ${number})`"
"`matrix(${number}, ${number}, ${number}, ${number}, ${number}, ${number})`"
"`translate(${number})`"
"`translate(${number} ${number})`"
"`scale(${number})`"
"`scale(${number} ${number})`"
"`rotate(${number})`"
"`rotate(${number} ${number} ${number})`"
"`skewX(${number})`"
"`skewY(${number})`"
[]
) => void
path:
(
func:
(
utils:
fromString:
(
d:string
) => void
moveToAbs:
(
x:number
y:number
args:
number[]
) => void
moveToRel:
(
dx:number
dy:number
args:
number[]
) => void
lineToAbs:
(
x:number
y:number
args:
number[]
) => void
lineToRel:
(
dx:number
dy:number
args:
number[]
) => void
lineToHorizontalAbs:
(
x:number
args:
number[]
) => void
lineToHorizontalRel:
(
dx:number
args:
number[]
) => void
lineToVerticalAbs:
(
y:number
args:
number[]
) => void
lineToVerticalRel:
(
dy:number
args:
number[]
) => void
cubicBezierAbs:
(
x1:number
y1:number
x2:number
y2:number
x:number
y:number
args:
number[]
) => void
cubicBezierRel:
(
dx1:number
dy1:number
dx2:number
dy2:number
dx:number
dy:number
args:
number[]
) => void
cubicBezierSmoothAbs:
(
x2:number
y2:number
x:number
y:number
args:
number[]
) => void
cubicBezierSmoothRel:
(
dx2:number
dy2:number
dx:number
dy:number
args:
number[]
) => void
quadraticBezierAbs:
(
x1:number
y1:number
x:number
y:number
args:
number[]
) => void
quadraticBezierRel:
(
dx1:number
dy1:number
dx:number
dy:number
args:
number[]
) => void
quadraticBezierSmoothAbs:
(
x:number
y:number
args:
number[]
) => void
quadraticBezierSmoothRel:
(
x:number
y:number
args:
number[]
) => void
ellipticalArcAbs:
(
radiusX:number
radiusY:number
angle:number
largeArcFlag:
"large"
"small"
sweepFlag:
"clockwise"
"counterclockwise"
nextX:number
nextY:number
args:
number[]
) => void
ellipticalArcRel:
(
radiusX:number
radiusY:number
angle:number
largeArcFlag:
"large"
"small"
sweepFlag:
"clockwise"
"counterclockwise"
nextXDelta:number
nextYDelta:number
args:
number[]
) => void
closePath:
() => void
) => void
optional?:
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number
transform?:
"`matrix(${number} ${number} ${number} ${number} ${number} ${number})`"
"`matrix(${number}, ${number}, ${number}, ${number}, ${number}, ${number})`"
"`translate(${number})`"
"`translate(${number} ${number})`"
"`scale(${number})`"
"`scale(${number} ${number})`"
"`rotate(${number})`"
"`rotate(${number} ${number} ${number})`"
"`skewX(${number})`"
"`skewY(${number})`"
[]
) => void
circle:
(
cx:number
cy:number
r:number
optional?:
pathLength?:number
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number
transform?:
"`matrix(${number} ${number} ${number} ${number} ${number} ${number})`"
"`matrix(${number}, ${number}, ${number}, ${number}, ${number}, ${number})`"
"`translate(${number})`"
"`translate(${number} ${number})`"
"`scale(${number})`"
"`scale(${number} ${number})`"
"`rotate(${number})`"
"`rotate(${number} ${number} ${number})`"
"`skewX(${number})`"
"`skewY(${number})`"
[]
) => void
rect:
(
x:number
y:number
width:
number
string
height:
number
string
optional?:
rx?:number
ry?:number
pathLength?:number
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number
transform?:
"`matrix(${number} ${number} ${number} ${number} ${number} ${number})`"
"`matrix(${number}, ${number}, ${number}, ${number}, ${number}, ${number})`"
"`translate(${number})`"
"`translate(${number} ${number})`"
"`scale(${number})`"
"`scale(${number} ${number})`"
"`rotate(${number})`"
"`rotate(${number} ${number} ${number})`"
"`skewX(${number})`"
"`skewY(${number})`"
[]
) => void
text:
(
content:string
x:
number
"`${number}%`"
number[]
"`${number}%`"[]
y:
number
"`${number}%`"
number[]
"`${number}%`"[]
optional?:
style?:
fill?:
"none"
string
stroke?:
"none"
string
strokeWidth?:number
strokeLinecap?:
"butt"
"square"
"round"
strokeLinejoin?:
"miter"
"round"
"bevel"
opacity?:number
transform?:
"`matrix(${number} ${number} ${number} ${number} ${number} ${number})`"
"`matrix(${number}, ${number}, ${number}, ${number}, ${number}, ${number})`"
"`translate(${number})`"
"`translate(${number} ${number})`"
"`scale(${number})`"
"`scale(${number} ${number})`"
"`rotate(${number})`"
"`rotate(${number} ${number} ${number})`"
"`skewX(${number})`"
"`skewY(${number})`"
[]
textStyle?:
fontSize?:
"xx-small"
"x-small"
"small"
"medium"
"large"
"x-large"
"xx-large"
"xxx-large"
"smaller"
"larger"
"`${number}${LenghtValueSuffix}`"
"math"

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family

fontFamily?:
"serif"
"sans-serif"
"monospace"
"cursive"
"fantasy"
"system-ui"
"ui-serif"
"ui-sans-serif"
"ui-monospace"
"ui-rounded"
"math"
"fangsong"
string

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight

fontWeight?:
"normal"
"bold"
100
200
300
400
500
600
700
800
900
"lighter"
"bolder"

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-style

fontStyle?:
"normal"
"italic"
"oblique"
"`oblique ${number}deg`"

// https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/text-anchor

textAnchor?:
"start"
"middle"
"end"

// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/dominant-baseline

dominantBaseline?:
"auto"
"text-bottom"
"alphabetic"
"ideographic"
"middle"
"central"
"mathematical"
"hanging"
"text-top"
dx?:
number
"`${number}%`"
number[]
"`${number}%`"[]
dy?:
number
"`${number}%`"
number[]
"`${number}%`"[]
rotate?:
number[]
lengthAdjust?:
"spacing"
"spacingAndGlyphs"
textLength?:
number
"`${number}%`"
) => void