7 jun
2017

Línea entre el perímetro de dos círculos

Tengo una duda con D3.js y SVG, no consigo pintar una linea (path o line) entre el perímetro de dos circulos. Como se puede ver en la imagen que adjunto, la line se pinta hasta el centro.

¿Alguien sabe cómo puedo limitar la línea?

Este es mi svg:

<svg id="svgId" width="100%" height="100%" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
   <g transform="translate(567.5,0) scale(1)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
      <g id="PUESTO0">
         <circle cx="0px" cy="50px" r="3%" style="stroke-width: 1; stroke: green; fill: url(&quot;#image&quot;);"></circle>
         <text dx="-71" dy="90">EJEMPLO PUESTO ORIGEN</text>
      </g>
      <g id="PUESTO1">
         <circle cx="-200px" cy="150px" r="10.25px" style="stroke-width: 6; stroke: rgb(0, 0, 255);"></circle>
         <text dx="-271" dy="190">EJEMPLO PUESTO 1</text>
      </g>
      <g id="pathGroup">
         <path d="M -200 150 L 0 50" class="path" source="PUESTO0" target="PUESTO1" style="stroke: rgb(70, 130, 180); fill: none;"></path>
      </g>
   </g>
   <defs>
      <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 128 128">
         <image x="0%" y="0%" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://files.softicons.com/download/application-icons/circle-icons-add-on-2-by-martz90/png/128x128/playstation.png"></image>
      </pattern>
   </defs>
</svg>

introducir la descripción de la imagen aquí

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation