    markup

Either an XML string or JSON markup specifying an array of JSON elements. Used as a template to build DOM Elements on the fly when the associated cellView is rendered.

#### XML String

A valid XML string that contains either a single `tagName` or XML that can be parsed with `DOMParser`.

    markup: 'rect'
    markup: '<rect class="rectangle"/>'
    markup: '<rect><g><circle/><circle/></g>'

Note that defining Cell markup with XML strings is slower than defining it with JSON arrays, precisely because of the need for parsing. We strongly recommend you to use the JSON markup for your Cell definitions.

#### JSON Markup

JSON markup is defined recursively as an array of `JSONElement`, where `JSONElement` is a plain object with the following properties:

- `tagName` (string) (required) The type of element to be created.
- `selector` (string) A unique selector for targeting the element within the `attr` cell attribute.
- `groupSelector` (string | string[]) A selector for targeting multiple elements within the `attr` cell attribute. The group selector name must not be the same as an existing selector name.
- `namespaceURI` (string) The namespace URI of the element. It defaults to SVG namespace `"http://www.w3.org/2000/svg"`.
- `attributes` (object with attributes name-value pairs) Attributes of the element.
- `style` (object with CSS property-value pairs) The `style` attribute of the element.
- `className` (string) The `class` attribute of the element.
- `children` (JSONMarkup) The children of the element.
- `textContent` (string) The text content of the element.

    // single DOM element
    markup: [{ tagName: 'rect' }]

    // multiple DOM elements
    markup: [{
        tagName: 'rect',
        selector: 'body'
    }, {
        tagName: 'text',
        selector: 'label',
        attributes: {
            'stroke': 'none'
        }
    }]

    // nested DOM elements
    markup: [{
        tagName: 'g',
        children: [{
            tagName: 'circle',
            selector: 'circle1',
            groupSelector: 'circles'
        }, {
            tagName: 'circle',
            selector: 'circle2',
            groupSelector: 'circles'
        }]
    }]

##### Setting attributes with selectors

Here are simple rules how SVG attributes are set on the nodes when one uses combination of `selector` and `groupSelector`.

- `selector` is unique i.e. can target a single node only.
- `selector` takes precedence over `groupSelector`.
- `groupSelector` targeting `n` nodes takes precedence over `groupSelector` targeting `m` nodes for `n` < `m`. When `n` === `m` the order how the attributes are applied is unspecified.

In the example below, the circle with the selector `circle1` is filled with `"red"` color. All the other circles are filled with `"blue"` color.

    cell.attr({
        circle1: { fill: 'red' },
        circles: { fill: 'blue', stroke: 'black' }
    });