0

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...

2
  • add a viewBox attribute to the <svg> element Commented Mar 10, 2016 at 14:16
  • I tried it with viewBox={0, 0, 1400, 1920}, but this doesn't solve it...
    – user5856396
    Commented Mar 10, 2016 at 14:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.