Text

import {Text} from 'cx/svg';

The Text widget renders SVG text. The initial cursor position is the top-left corner of the bounding box. textAnchor and dy attributes are used to position the text.

Index

<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0 1 1 0" style="fill:lightblue" />
   <Text anchors="0 1 1 0" textAnchor="start" dy="0.8em">Top-left</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0 1 1 0.5" style="fill:lightblue" />
   <Text anchors="0 1 1 0.5" textAnchor="middle" dy="0.8em">Top-center</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0 1 1 1" style="fill:lightblue" />
   <Text anchors="0 1 1 1" textAnchor="end" dy="0.8em">Top-right</Text>
</Svg>

<div style="width:100%" />

<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0.5 1 1 0" style="fill:lightblue" />
   <Text anchors="0.5 1 1 0" textAnchor="start" dy="0.4em">Middle-left</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0.5 1 1 0.5" style="fill:lightblue" />
   <Text anchors="0.5 1 1 0.5" textAnchor="middle" dy="0.4em">Middle-center</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="0.5 1 1 1" style="fill:lightblue" />
   <Text anchors="0.5 1 1 1" textAnchor="end" dy="0.4em">Middle-right</Text>
</Svg>

<div style="width:100%" />

<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="1 1 1 0" style="fill:lightblue" />
   <Text anchors="1 1 1 0" textAnchor="start">Bottom-left</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="1 1 1 0.5" style="fill:lightblue" />
   <Text anchors="1 1 1 0.5" textAnchor="middle">Bottom-center</Text>
</Svg>
<Svg style="width:100px;height:100px;background:white;margin:5px">
   <Rectangle anchors="1 1 1 1" style="fill:lightblue" />
   <Text anchors="1 1 1 1" textAnchor="end">Bottom-right</Text>
</Svg>

Copied!Cx Fiddle

Internet Explorer doesn't support dominant-baseline property which is used for vertical text alignment. As an alternative, the dy attribute can be used to align the text.

Configuration

Property	Description	Type
dx	Offset along the x-axis.	string
dy	Offset along the y-axis. This property is commonly used for vertical text alignment. Set `dy="0.8em"` to align the text with the top and `dy="0.4em"` to center it vertically.	string
fill	Sets text-body color.	string
textAnchor ta	Used for horizontal text alignment. Accepted values are `start`, `middle` and `end`.	string
value	Text to be displayed.	string
anchors	Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge. See Svg for more information.	string/number/rect
autoTextAnchor	Set to `true` for the text to set the text anchor based on the direction of the parent element. See PieLabels example.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
items children	List of child elements.	array
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
offset	Move boundaries specified by the offset. See Svg for more information.	string/number/rect
outerLayout	Defines the outer layout which wraps the widget.	widget
padding	Padding to be applied to the boundaries rectangle before passing to the children.	string/number/rect
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
stroke	Sets text-outline color.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Text