Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 7, 2017 17:40
Show Gist options
  • Save anonymous/2de745b12b95efbd87dddd21d9142a48 to your computer and use it in GitHub Desktop.
Save anonymous/2de745b12b95efbd87dddd21d9142a48 to your computer and use it in GitHub Desktop.
Download ZIP
resizable-svg-001
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>resizable-svg-001</title>
<link rel="stylesheet" href="styles.css">
<script type="application/dart" src="main.dart"></script>
</head>
<body>
<div id="container">
<svg id="sketch" width=100 height=100>
<line x1="0" y1="0" x2="100%" y2="100%" class="gearRadial" />
<line id="handle" y1=0 y2="100%" x1="100%" x2="100%"/>
</svg>
</div>
</body>
</html>
Raw
main.dart
import 'dart:html';
import 'dart:svg';
import 'dart:math';
int getAsPixels(String measure) {
if (measure.substring(measure.length-2) == "px") {
return int.parse(measure.substring(0, measure.length-2));
} else {
print("Can't deal with value '${measure}'.");
return 0;
}
}
void main() {
final HtmlElement container = querySelector("#container");
final SvgElement sketch = querySelector("#sketch");
final padding = getAsPixels(container.getComputedStyle().padding);
final border = getAsPixels(container.getComputedStyle().borderWidth);
final margin = getAsPixels(sketch.getComputedStyle().margin);
final width = container.client.width - 2 * (border + padding + margin);
sketch.setAttributeNS(null, "width", width.toString());
}
Raw
styles.css
#container {
border: solid 2px red
}
#sketch {
border: dashed
}
.gearRadial {
stroke: rgb(255,0,0);
stroke-width: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment