Skip to content

Instantly share code, notes, and snippets.

@Fordi
Forked from TheMcMurder/index.html
Last active August 29, 2015 14:18
Show Gist options
  • Save Fordi/5524e875dabbcf603208 to your computer and use it in GitHub Desktop.
Save Fordi/5524e875dabbcf603208 to your computer and use it in GitHub Desktop.

This will convert an absolute SVG path to a relative SVG path.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<div class="page-header">
<center>
<h1>Conversion<small>(1.937)</small></h1></center>
</div>
<div class= "container-fluid">
<div class = "hero-unit">
<center>
<legend>Convert SVG Line to relative</legend>
<label>Mixed relative and Absolute path (string only)</label>
<textarea rows = "4" id = "incorrectpath" type="text" placeholder="place text here"></textarea>
<span id = "answerhere" class="help-block">Answer will appear here</span>
<button onclick = "convertToRelative()" class="btn btn-inverse">Submit</button>
</center>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function convertToRelative() {
var pathstring = document.getElementById("incorrectpath").value
//console.log(pathstring + "got it in")
var svg = d3.select("body").append("svg")
var simple = svg.append("path")
.attr("d", pathstring);
var path = simple.node()
function set(type) {
var args = [].slice.call(arguments, 1)
, rcmd = 'createSVGPathSeg'+ type +'Rel'
, rseg = path[rcmd].apply(path, args);
segs.replaceItem(rseg, i);
}
var dx, dy, x0, y0, x1, y1, x2, y2, segs = path.pathSegList;
for (var x = 0, y = 0, i = 0, len = segs.numberOfItems; i < len; i++) {
var seg = segs.getItem(i)
, c = seg.pathSegTypeAsLetter;
if (/[MLHVCSQTAZz]/.test(c)) {
if ('x1' in seg) x1 = seg.x1 - x;
if ('x2' in seg) x2 = seg.x2 - x;
if ('y1' in seg) y1 = seg.y1 - y;
if ('y2' in seg) y2 = seg.y2 - y;
if ('x' in seg) dx = -x + (x = seg.x);
if ('y' in seg) dy = -y + (y = seg.y);
switch (c) {
case 'M': set('Moveto',dx,dy); break;
case 'L': set('Lineto',dx,dy); break;
case 'H': set('LinetoHorizontal',dx); break;
case 'V': set('LinetoVertical',dy); break;
case 'C': set('CurvetoCubic',dx,dy,x1,y1,x2,y2); break;
case 'S': set('CurvetoCubicSmooth',dx,dy,x2,y2); break;
case 'Q': set('CurvetoQuadratic',dx,dy,x1,y1); break;
case 'T': set('CurvetoQuadraticSmooth',dx,dy); break;
case 'A': set('Arc',dx,dy,seg.r1,seg.r2,seg.angle,
seg.largeArcFlag,seg.sweepFlag); break;
case 'Z': case 'z': x = x0; y = y0; break;
}
}
else {
if ('x' in seg) x += seg.x;
if ('y' in seg) y += seg.y;
}
// store the start of a subpath
if (c == 'M' || c == 'm') {
x0 = x;
y0 = y;
}
}
path.setAttribute('d', path.getAttribute('d').replace(/Z/g, 'z'));
var NewPathAsString = path.getAttribute('d');
simple.remove()
//console.log(NewPathAsString)
$("span").text(NewPathAsString)
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment