diff --git a/examples/svg_basic.rs b/examples/svg_basic.rs new file mode 100644 index 000000000..40eb80b23 --- /dev/null +++ b/examples/svg_basic.rs @@ -0,0 +1,75 @@ +use dioxus::prelude::*; + +fn app(cx: Scope) -> Element { + cx.render(rsx!( svg { + width: "200", + height: "250", + xmlns: "http://www.w3.org/2000/svg", + version: "1.1", + rect { + x: "10", + y: "10", + width: "30", + height: "30", + stroke: "black", + fill: "transparent", + stroke_width: "5", + } + rect { + x: "60", + y: "10", + width: "30", + height: "30", + stroke: "black", + fill: "transparent", + stroke_width: "5", + } + circle { + cx: "25", + cy: "75", + r: "20", + stroke: "red", + fill: "transparent", + stroke_width: "5", + } + ellipse { + cx: "75", + cy: "75", + rx: "20", + ry: "5", + stroke: "red", + fill: "transparent", + stroke_width: "5", + } + line { + x1: "10", + x2: "50", + y1: "110", + y2: "150", + stroke: "orange", + stroke_width: "5", + } + polyline { + points: "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145", + stroke: "orange", + fill: "transparent", + stroke_width: "5", + } + polygon { + points: "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180", + stroke: "green", + fill: "transparent", + stroke_width: "5", + } + path { + d: "M20,230 Q40,205 50,230 T90,230", + fill: "none", + stroke: "blue", + stroke_width: "5", + } + })) +} + +fn main() { + dioxus::desktop::launch(app); +}