## 2018-03-15 #SVG 

```javascript
import {pt} from 'src/client/graphics.js';
import svg from "src/client/svg.js"

document.body.querySelectorAll('svg#path').forEach(s => s.remove())
let path = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(path)
path.id = 'path'
path.style.backgroundColor = 'lightgray'
lively.setPosition(path, pt(10,10))
path.style.overflow = 'visible'

let p = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.appendChild(p)
p.setAttribute('d', 'M 0 0 L 50 50 L 50 100')
p.setAttribute("stroke", 'red');
p.setAttribute("stroke-width", 2);        
p.setAttribute("fill", "none");

let from = lively.get('#from')
let to = lively.get('#to')
let offset = lively.getGlobalPosition(path)
let fromP = lively.getGlobalCenter(from).subPt(offset)
let toP = lively.getGlobalCenter(to).subPt(offset)
svg.setPathVertices(p, [
  { c: 'M', x1: fromP.x, y1: fromP.y},
  { c: 'L', x1: toP.x, y1: toP.y},
]);
```

```javascript
import {pt} from 'src/client/graphics.js';
import svg from "src/client/svg.js"

document.body.querySelectorAll('svg#path').forEach(s => s.remove())
let path = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(path)
path.id = 'path'
path.style.backgroundColor = 'lightgray'
lively.setPosition(path, pt(10,10))
path.style.overflow = 'visible'

let p = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.appendChild(p)
p.setAttribute('d', 'M 0 0 L 50 50 L 50 100')
p.setAttribute("stroke", 'red');
p.setAttribute("stroke-width", 2);        
p.setAttribute("fill", "none");

let from = lively.get('#from')
let to = lively.get('#to')
let offset = lively.getGlobalPosition(path)

let fromP = lively.getGlobalCenter(from).subPt(offset)
let fromBounds = lively.getGlobalBounds(from)
let startPoint = fromBounds.rightCenter().subPt(offset)
let startOffsetPoint = startPoint.addPt(pt(20, 0))

let toP = lively.getGlobalCenter(to).subPt(offset)

svg.setPathVertices(p, [
  { c: 'M', x1: startPoint.x, y1: startPoint.y},
  { c: 'L', x1: startOffsetPoint.x, y1: startOffsetPoint.y},
  { c: 'L', x1: startOffsetPoint.x, y1: toP.y},
  { c: 'L', x1: toP.x, y1: toP.y},
]);
```