Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@vprus

vprus/README.md

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vprus/cbd156d6939ffdf623ae to your computer and use it in GitHub Desktop.
Save vprus/cbd156d6939ffdf623ae to your computer and use it in GitHub Desktop.
Download ZIP
Rectangles in SVG
Raw
README.md

Example of using half-pixel coordinates with SVG.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>SVG rectangles</title>
</head>
<body>
<svg style="display: block; margin-top: 100px; width: 960; margin-left: auto; margin-right: auto;">
<g transform="scale(8, 8)">
<g id="grid"/>
<g transform="translate(10, 0)">
<rect x="0.5px" y="2.5px" fill="#FFFFFF" fill-opacity="0.5" stroke="black"
stroke-width="1px" rx="2" ry="2" width="100" height="25"></rect>
<text font-size="14" y="20px" x="10px" fill="black" font-family="Arial,
helvetica, sans-serif">Graph Node</text>
<circle fill="white" stroke="black" cy="2.5px" r="2px"
stroke-width="1px" transform="translate(50,0)
"></circle>
<circle fill="#FFFFFF" stroke="black" cy="27.5px" r="2px" stroke-width="1px"
transform="translate(50,0) "></circle>
</g>
</g>
</svg>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="svg.js"></script>
</body>
Raw
svg.js
$(function() {
var g = $("g#grid");
for (var i = 0; i < 31; ++i) {
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1','0');
line.setAttribute('y1',i);
line.setAttribute('x2','120');
line.setAttribute('y2',i);
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', '0.1px');
g.append(line);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment