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>
What you can do is create a mask and apply it to the line. With the mask, only what is in the space not colored by the mask will be painted (you could see it as a kind of inverse of the clipPath).
The problem that I have found is the
transform="translate(567.5,0) scale(1)"
, especially thetranslate
. If I remove it (and update the X coordinate values by adding 567.5 to everything), it works fine. I have to see how it would work with thetranslate
.So the idea would be to do something like this:
The problem was in the transparency of the image (.png), although the line is drawn before in the DOM, the transparency of the image shows the line below. I have solved it by removing the transparency to the image using an external tool.