Path
La traduction de cette page manque ou n'est plus à jour : elle s'affiche en anglais. Lire en anglais
Draw a custom outline from SVG-style path commands. Use it for icons and irregular shapes.
Draw a vector path
import { Drawing, Path } from 'kuito';
export function Example() {
return (
<Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
<Path d="M10 50 L35 75 L90 15" fill="none" stroke="#2563eb" strokeWidth={8} />
</Drawing>
);
}Behavior
Place this shape inside Drawing. Coordinates use its viewBox, not screen points. Fill and stroke control paint. Shapes are drawing instructions rather than independently accessible native views.
Continue
Read Drawing for a complete workflow. See the complete prop reference for types and documented defaults.
Référence
Signatures
Props: PathProps
Props (props héritées incluses) 15
| Nom | Type | Requis | Description |
|---|---|---|---|
d | string | Oui | SVG path data: M0 0L10 10Z. |
fill | string | Non | A hex color, or none; black by default. |
fillRule | FillRule | Non | — |
stroke | string | Non | A hex color, or none, the default. |
strokeWidth | number | Non | In user units; 1 by default. |
strokeLinecap | StrokeLinecap | Non | — |
strokeLinejoin | StrokeLinejoin | Non | — |
strokeMiterlimit | number | Non | — |
strokeDasharray | readonly number[] | Non | Dash and gap lengths in user units, repeated. |
strokeDashoffset | number | Non | — |
opacity | number | Non | Multiplies with its Groups' opacity. |
translateX | number | Non | In user units, then rotate in degrees and scale, about the origin. |
translateY | number | Non | — |
scale | number | Non | — |
rotate | number | Non | — |
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.