Struct freya_elements::elements::svg

pub struct svg;

svg element let’s you display SVG code.

You will need to use the bytes_to_data to transform the bytes into data the element can recognize.

Example:

static FERRIS: &[u8] = include_bytes!("./ferris.svg");

fn app(cx: Scope) -> Element {
    let ferris = bytes_to_data(cx, FERRIS);
    render!(
        svg {
            svg_data: ferris,
        }
    )
}

Implementations

impl svg

pub const margin: AttributeDescription = _

margin

Specify the margin of an element. You can do so by three different ways, just like in CSS.

fn app(cx: Scope) -> Element {
    render!(
        rect {
            margin: "25" // 25 in all sides
            margin: "100 50" // 100 in top and bottom, and 50 in left and right
            margin: "5 7 3 9" 5 // in top, 7 in right, 3 in bottom and 9 in left
        }
    )
}

pub const height: AttributeDescription = _

width and height

Specify the width and height for the given element.

See syntax in Size Units.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            background: "red",
            width: "15",
            height: "50",
        }
    )
}

pub const width: AttributeDescription = _

pub const rotate: AttributeDescription = _

rotate

The rotate attribute let’s you rotate an element.

Example:

fn app(cx: Scope) -> Element {
    render!(
        label {
            rotate: "180deg",
            "Hello, World!"
        }
    )
}

Compatible elements: all except text.

pub const opacity: AttributeDescription = _

opacity

Specify the opacity of an element and all its desdendants.

Example:

fn app(cx: Scope) -> Element {
    render!(
        rect {
            opacity: "0.5", // 50% visible
            label {
                "I am fading!"
            }
        }
    )
}

pub const svg_data: AttributeDescription = _

pub const svg_content: AttributeDescription = _

pub const role: AttributeDescription = _

pub const focus_id: AttributeDescription = _

pub const alt: AttributeDescription = _

pub const name: AttributeDescription = _

pub const focusable: AttributeDescription = _