1

I have a big svg and inside it, there are 5 more little svgs. i placed 3 svg inside the big svg. I will implement this with different coordinates etc. For now, i just want to make lines between 3 svg automatically. I can draw svg lines and connect them between but i want even if change the position, i want the lines automatically connect they each other.

Edit: This question is not same with you mention. I am asking how i can make that lines via jquery and automatically. I mean if i change the the coordiantes, lines will not stay static. They will follow the shapes.

enter image description here

.rect-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

svg {
  fill: red;
}

svg.mini-icon {
  fill: black;
  position: absolute;
}

svg.mini-asteriks {
  top: 5%;
  left: 3%;
}

svg.mini-diamond {
  top: 24%;
  left: 54%;
}

svg.mini-rect {
  top: 73%;
  left: 69%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rect">
    <div class="rect-wrap rect-wrap-edna">
    
          <svg class="big-rect-circle" data-person="asli" width="80px" height="80px" viewBox="0 0 47 47">
          <circle  class="mini-circle " cx="23" cy="23" r="23"/>
        </svg>
        
        <svg class="mini-asteriks mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 45.438 48.32">
             <path class="st0edna asterix" d="M18.72 0h8.16l-.16 16.96 14.72-8.64 4 7.52-14.88 8.32 14.878 8.32-4 7.52-14.718-8.64.16 16.96h-8.16l.16-17.12-14.72 8.64L0 32.48l14.88-8.32L0 15.84l4.16-7.68 14.72 8.8L18.72 0z"/>
        </svg>
        <svg class="mini-diamond mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 65.054 65.054">
            <rect class="st0edna diamond" x="9.528" y="9.527" transform="rotate(-135 32.527 32.527)" width="46" height="46"/>
        </svg>
        <svg class="mini-rect mini-icon" data-person="asli" width="16px" height="16px" viewBox="0 0 47 47">
            <rect class="mini-rect " x=".5" y=".5"  width="46" height="46"/>
        </svg>
    </div>

</div>
erenesto
  • 197
  • 1
  • 11
  • 2
    I think you're going to need to move them via javascript. – Robert Longson Aug 30 '17 at 11:27
  • yes i need with javascript but i do not know how. thats why i asked. – erenesto Aug 30 '17 at 11:37
  • Is there a reason that you have all your icons as separate SVGs drawn after the other one? Your task would become a lot simpler if you put your icons inside the same SVG as the red dot. Then you would be able to get the position of the icons with `getBBox()` and create the lines with `document.createElementNS()`. – Paul LeBeau Aug 30 '17 at 12:15
  • hi @PaulLeBeau. can you explain more please? I am new on JS. – erenesto Aug 30 '17 at 13:31
  • Why are your icons (paths and rects) in their own SVGs, and not in the first SVG? – Paul LeBeau Aug 31 '17 at 15:32
  • I am first time working with SVGs. Otherwise I could not move the black shapes in the red circle. How can I group them? – erenesto Sep 02 '17 at 13:41

0 Answers0