I'm trying to achieve a Bootstrap grid with SVG paths behind connecting the Containers. The problem is that I'm creating the paths in an angular controller absolute and then there aren't resizable/responsive. Do you guys have any tips to solve my problem?
CodeSnippet to create the paths: (this works)
var tmpPath = document.createElementNS('http://www.w3.org/2000/svg',"path");
tmpPath.setAttribute("d", "M"+ aHor + "," + aVert +" L" + bHor + "," + bVert);
this.setPathStyle(tmpPath, id);
root.appendChild(tmpPath);
Path Style:
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
position : absolute;
stroke : black;
HTML Grid:
<svg class="svg"></svg>
<div id="start" ng-controller="PathController as pc">
<div class="col-md-6">
<div id="box1" class="box" ng-init="pc.init(1)">
<h1>some text</h1>
</div>
</div>
<div class="col-md-2">
<div id="box2" class="box" ng-init="pc.init(2)">
<img class="img" src="path">
</div>
</div>
<div class="col-md-4">
<div class="box">
<img class="img" src="path2">
</div>
</div>
And the svg style:
position: absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
I already tried to call a new controller function like "changePath" from jquery and 'resize' but got the error that this isn't possible with jqLite... I also tried some solutions with "viewBox" without sucess...
<svg>
element