I have a question with D3.js and SVG, I can't paint a line ( path
or line
) between the perimeter of two circles. As you can see in the image that I attached, line
it is painted up to the center.
Does anyone know how I can limit the line?
This is my 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("#image");"></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>