SVG

import {Svg} from 'cx/svg';

Cx has a very good support for Scalable Vector Graphics (SVG) and enables responsive layouts and charts using the concept of bounded objects.

Bounded Objects

To allow the use of bounded objects, use the Svg container, instead of svg.

The Svg component will measure its size and pass the bounding box information to child elements. Child elements should use parent bounds to calculate their own size and pass it to their own children.

Bounds are defined using the anchors, offset and margin properties. Each of these properties consists of four components t r b l. which represent top, right, bottom, left edges of the rectangle (in clockwise order). Suffixes should not be used (e.g. % or px).

`anchors`

Anchor defines how child bounds are tied to the parent. Zero aligns to the left/top edge. One aligns to the right/bottom edge.

SVGs

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0 1 1 0" style="fill:lightblue" />
    <Text textAnchor="middle" dy="0.4em" style="font-size:10px">0 1 1 0</Text>
</Svg>

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0.25 0.75 0.75 0.25" style="fill:lightblue" />
    <Text textAnchor="middle" dy="0.4em" style="font-size:10px">0.25 0.75 0.75 0.25</Text>
</Svg>

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0 0.5 1 0" style="fill:lightblue" />
    <Text textAnchor="middle" dy="0.4em" style="font-size:10px">0 0.5 1 0</Text>
</Svg>

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0 1 0.5 0" style="fill:lightblue" />
    <Text textAnchor="middle" dy="0.4em" style="font-size:10px">0 1 0.5 0</Text>
</Svg>

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0.5 1 1 0.5" style="fill:lightblue" />
    <Text textAnchor="middle" dy="0.4em" style="font-size:10px">0.5 1 1 0.5</Text>
</Svg>

Copied!Cx Fiddle

`offset`

The offset property is applied second, and it translates the edges of the box.

Offset Margin

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0 1 1 0" offset="5 -5 -5 5" style="fill:lightblue" />
    <Text textAnchor="middle" dy="-0.1em" style="font-size:10px">A: 0 1 1 0</Text>
    <Text textAnchor="middle" dy="0.9em" style="font-size:10px">O: 5 -5 -5 5</Text>
</Svg>

<Svg style="width:100px;height:100px;background:white;margin:5px">
    <Rectangle anchors="0.5 0.5 0.5 0.5" offset="-30 30 30 -30" style="fill:lightblue" />
    <Text textAnchor="middle" dy="-0.1em" style="font-size:10px">A: 0.5 0.5 0.5 0.5</Text>
    <Text textAnchor="middle" dy="0.9em" style="font-size:10px">O: -30 30 30 -30</Text>
</Svg>

Copied!Cx Fiddle

`margin`

The margin property is very similar to the offset property. The only difference is that it behaves just like a CSS margin, that is, positive values move the edges to the inside, and negative values expand them to the outside of the bounds set with the anchor property.

Aspect Ratio

When it's not possible to give fixed dimensions to a chart or other SVG based element, it's best to use the aspectRatio configuration to automatically resize the element based on available screen space.

In this example, the height of the rectangle is exactly four times smaller than its width.

Aspect Rations

<Svg style="width:100%" aspectRatio={4} autoHeight>
    <Rectangle anchors="0 1 1 0" style="fill:lightblue"/>
</Svg>

Copied!

Configuration

Property	Description	Type
aspectRatio	Aspect ratio of the the SVG element. Default value is `1.618`. This value doesn't have any effect unless `autoWidth` or `autoHeight` is set.	number
autoHeight	Set to `true` to automatically calculate height based on the measured width and `aspectRatio`.	number
autoWidth	Set to `true` to automatically calculate width based on the measured height and `aspectRatio`.	boolean
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
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
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

SVG