Skip to content

Instantly share code, notes, and snippets.

@ltackmann
Created December 29, 2011 04:09
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ltackmann/1531821 to your computer and use it in GitHub Desktop.
Save ltackmann/1531821 to your computer and use it in GitHub Desktop.
SVG in Dart
#import('dart:html');
class SVGSamples {
void run() {
drawlines();
}
void drawlines() {
final int maxY = 250;
final int maxX = 500;
final int step = 10;
var svgGroup = new SVGElement.tag("g");
svgGroup.attributes["transform"] = "translate(0,$maxY) scale(1,-1)";
for(int i=0; i<(maxX/step); i++) {
var xAxis = new SVGElement.tag("line");
xAxis.attributes = {
"x1": i*step,
"y1": 0,
"x2": i*step,
"y2": (i%10 == 0 ? 16 : 8),
"stroke": (i%10 == 0 ? "#8cf" : "blue"),
"stroke-width": "1"
};
svgGroup.nodes.add(xAxis);
}
for(int i=0; i<(maxY/step); i++) {
var yAxis = new SVGElement.tag("line");
yAxis.attributes = {
"x1": 0,
"y1": i*step,
"x2": (i%10 == 0 ? 16 : 8),
"y2": i*step,
"stroke": (i%10 == 0 ? "#8cf" : "blue"),
"stroke-width": "1"
};
svgGroup.nodes.add(yAxis);
}
var svg = new SVGElement.tag("svg");
svg.nodes.add(svgGroup);
svg.attributes = {
"height": maxY,
"width": maxX,
"version": "1.1"
};
document.query("#container").nodes.add(svg);
}
}
void main() {
new SVGSamples().run();
}
<html>
<head>
<title>SVGSamples</title>
</head>
<body>
<h1>SVGSamples</h1>
<div id="container"></div>
<script type="text/javascript" src="SVGSamples.dart.js"></script>
</body>
</html>
@matey-jack
Copy link

For anyone finding this in search of a working Dart SVG example, here is the same thing updated to 2017 Dart and in a pad: https://dartpad.dartlang.org/3230714bab391a41670040250b8a3099

@swuecho
Copy link

swuecho commented Nov 6, 2021

@matey-jack outdated again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment