Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 8, 2017 14:09
Show Gist options
  • Save anonymous/c984c1309ed65b4d91e551c1eeed3550 to your computer and use it in GitHub Desktop.
Save anonymous/c984c1309ed65b4d91e551c1eeed3550 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>
<div>
Documentation:
<ul>
<li>
https://www.w3schools.com/graphics/svg_line.asp
</li>
<li>
https://webdev.dartlang.org/tutorials/low-level-html/add-elements
</li>
<li>
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
</li>
<li>
http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element
</li>
<li>
</li>
</ul>
<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
}
#handle {
stroke: rgb(255, 255, 0);
stroke-width: 4;
stroke-style: dashed;
pointer:
}
.gearRadial {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
div {
margin: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment