Apply shared paint or transforms to several drawing shapes. Use it to move or style a diagram section together.

Draw a vector group

tsx
import { Drawing, Group, Circle } from 'kuito';

export function Example() {
  return (
    <Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
      <Group fill="#2563eb">
        <Circle cx={30} cy={50} r={15} />
        <Circle cx={70} cy={50} r={15} />
      </Group>
    </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.

Referência

Assinaturas

ts
(_props: GroupProps): KuitoNode

Parâmetros

NomeTipoObrigatórioDescrição
_propsGroupPropsSim—

Devolve

KuitoNode

Props: GroupProps

Props (incluindo props herdadas) 15

NomeTipoObrigatórioDescrição
childrenKuitoNodeNão—
fillstringNãoA hex color, or none; black by default.
fillRuleFillRuleNão—
strokestringNãoA hex color, or none, the default.
strokeWidthnumberNãoIn user units; 1 by default.
strokeLinecapStrokeLinecapNão—
strokeLinejoinStrokeLinejoinNão—
strokeMiterlimitnumberNão—
strokeDasharrayreadonly number[]NãoDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNão—
opacitynumberNãoMultiplies with its Groups' opacity.
translateXnumberNãoIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNão—
scalenumberNão—
rotatenumberNão—
Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.