[ @sdxc/u/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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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" })`

Examples

Basic example

Use vectorEffect with non-scaling-stroke to keep a stroke's width constant when the SVG around it is scaled or stretched:

<div mix={[...]}>
	<svg
		width="100%"
		height={80}
		viewBox="0 0 10 10"
		preserveAspectRatio="none"
		aria-hidden="true"
	>
		<polyline
			points="0,8 2,5 4,6 6,2 8,4 10,1"
			mix={[stroke("brand"), fill("none"), strokeWidth(0.5)]}
		/>
	</svg>
	<svg
		width="100%"
		height={80}
		viewBox="0 0 10 10"
		preserveAspectRatio="none"
		aria-hidden="true"
	>
		<polyline
			points="0,8 2,5 4,6 6,2 8,4 10,1"
			mix={[stroke("brand"), fill("none"), strokeWidth(2), vectorEffect("non-scaling-stroke")]}
		/>
	</svg>
</div>

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")