# 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.

```ts
import { vectorEffect } from "@sdxc/u/color";
```

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.

## 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:

```tsx
<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.

```ts
u.hover(u.vectorEffect("non-scaling-stroke"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.vectorEffect("non-scaling-stroke"))
```

## Signature

```ts
u.vectorEffect(value: "none" | "non-scaling-stroke" | "non-scaling-size" | "non-rotation" | "fixed-position")
```