color
vector-effect
Sets vector-effect, exempting an SVG shape from its ancestor transforms: "non-scaling-stroke" keeps a chart line's stroke width constant while the chart itself scales or zooms.
import { vectorEffect } from "@sdxc/u/color";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.vectorEffect("non-scaling-stroke") | css({ vectorEffect: "non-scaling-stroke" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.vectorEffect("non-scaling-stroke")Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.vectorEffect("non-scaling-stroke"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.vectorEffect("non-scaling-stroke"))Signature
u.vectorEffect(value: "none" | "non-scaling-stroke" | "non-scaling-size" | "non-rotation" | "fixed-position")