Table of Contents

Raw SVG Repeater

The raw SVG repeater accepts SVG code and repeats the specified image once for each row of data in a table.

For a detailed reference of properties that affect raw SVG repeaters, see Common Properties and Raw SVG Repeater Properties.

To learn more about SVG and the defs element, see an online reference like this one.

To create an SVG, you can use a WYSIWYG SVG editor like this one.

Raw SVG repeater component
A raw SVG repeater component in DGLux5

Create a raw SVG repeater

To create a raw SVG repeater:

  1. Right-click in the Outline or Document window, and select Insert > Charts > Raw SVG Repeater.
  2. In the Outline or Document window, right-click the raw SVG repeater and select Dataflow.
  3. Load data in the dataflow, using the steps in Working with Tables.
  4. With the raw SVG repeater selected, in the Property Inspector:
    1. Link the dataflow table to the Data property.
    2. For SVG Item, enter the code that defines your SVG.
    3. For SVG Defs, enter the SVG defs, if any.

Optionally, you can also add a symbol to use as a datatip. A datatip appears when the user mouses over an SVG instance.

Example

Here is an example. For another example, see Raw SVG Repeater Properties. You can also create your SVG code using a WYSIWYG SVG editor like this one.

SVG Item
<circle r="15" cx="[v1]0" cy="[v2]0"/>

SVG Defs
<style>circle{fill:gray;stroke:teal;stroke-width:2;}</style>

Raw SVG Repeater Properties

These properties affect raw SVG repeaters.

For a guide to using raw SVG repeaters, see Raw SVG Repeater.

You can create your SVG code using a WYSIWYG SVG editor like this one.

Raw SVG repeaters are also affected by Common Properties.

Raw SVG Repeater properties
The Raw SVG Repeater properties in the Property Inspector

Data

Data

Data
Defines the table that controls this SVG repeater. The SVG element will repeat once for each row in the table. Table columns can be used to represent attributes of the SVG element, such as style or coordinates.

The Data property
The Data property

Datatip Symbol

Datatip Symbol

Datatip Symbol
Defines the symbol that appears as a datatip when mousing over an instance of the SVG in this repeater.

The Datatip Symbol property
The Datatip Symbol property

SVG Item

SVG Item

SVG Item
Defines the code for an SVG element to be repeated by this repeater.

Example
<rect width="30" height="30" fill="green" x="[v1]00" y="[v2]"></rect>

This example creates a repeating green rectangle SVG element. The SVG element appears at the x- and y-coordinates defined by columns v1 and v2 of the linked table. In the case of the x-coordinate, the table cell values are multiplied by 100 by concatenating two zeroes.

Each X value is a distance in pixels from the left edge of this repeater. Each Y value is a distance in pixels from the top edge of this repeater.

The SVG Item property
The SVG Item property

SVG Defs

SVG Defs

SVG Defs
Defines the <defs> element for the repeated SVG element.

Example
<style>rect{fill:green;stroke:black;}</style>

This example defines a style for the repeated SVG rectangle. The style includes a green fill and a black border stroke.

The SVG Defs property
The SVG Defs property

2019/07/17 19:17

Previous: Chart

Next: Gauges