SVG line intersection calculation

Question

I was just going through this SVG, the code can be found below too:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
            <g stroke="#ccc">
                <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
            </g>
            <g stroke="#ccc">
                <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
            </g>
            <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
            <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
            <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text>
            <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
        </svg>

What I wanted to know is about the below line of code:

<g stroke="#ccc">
     <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
</g>

I.E. the values of the x1 attribute of the line, now if you change this value to anything more than 133 you will notice there is a break in where the line starts and the circle. I believe the author of this SVG has carefully planned the value of the x1 to be 133. I just can't seem to figure out how they came to conclude with the value of 133.

Of course, one can come to a conclusion through trial and error, but that's not the answer I am interested in. I want to know how the author really calculated the value of 133 for the starting line so that it exactly touches the edge of the circle.

They probably didn’t calculate anything themselves at all, but used a graphics program to create that SVG in the first place … — CBroe, Apr 10 '16 at 02:03
@CBroe sorry i did't want to make things complicated , but actually heres where the svg gets created , i just grabbed the final output https://github.com/pguso/jquery-plugin-circliful/blob/master/js/jquery.circliful.js#L65 — Alexander Solonik, Apr 10 '16 at 02:05
All I see there is that this `line` element is added as a static text literal, there is no calculation of those coordinates going on at that point. So, still – most likely simply copy&pasted from the source code of an SVG created using a graphics program. — CBroe, Apr 10 '16 at 02:10
@CBroe hmmm your mistaken , just have a glace though the souce , the SVG , is not at all created in an SVG editor , but rather , gets created here https://github.com/pguso/jquery-plugin-circliful/blob/master/js/jquery.circliful.js#L105 . hope that helps make things clearer. — Alexander Solonik, Apr 10 '16 at 02:12
I think you’re not understanding what I’m trying to tell you … Yes, it is of course not one static SVG image, but gets assembled in different steps by this script. But specifically those `` elements you asked about, are _hard-coded_ in that script (lines 65, 66, 72, 73, 85) – and all of them have _static_ values set for all four coordinates right there, there is not one single bit of _calculation_ going on for those values. — CBroe, Apr 10 '16 at 02:23
Therefor it is just a reasonable assumption, that the creator of this script started by creating a base SVG image in an image editor – and then they decided which parts/components of that image need to have any values calculated dynamically, and which ones won’t ever need any modification. — CBroe, Apr 10 '16 at 02:24
@CBroe thanks alot , and sorry to be a pain , but i would still like to know , is there a mathematic way in which the perfect interesection of the line with the circle can be found out ? :) TY — Alexander Solonik, Apr 10 '16 at 03:33
See [demo](https://alkhoo-app.appspot.com/akfiddle/circle_angle.html) using snapsvg. Not sure what you mean by "perfect" intersection.. — Alvin K., Apr 10 '16 at 03:55
@AlexanderSolonik: The coordinates used in that code are approximate values and might have been generated through trial and error (or by a tool as CBroe mentioned). But it is possible to mathematically calculate the coordinates for that point (such that the line's end meets the circle). You can find that calculation logic in [**my answer here**](http://stackoverflow.com/questions/30729543/creating-a-new-spiky-label-with-24-or-above-point-burst/30892219#30892219). For this case, it seems like the author had used 306deg as the angle. — Harry, Apr 10 '16 at 05:47
[This demo](https://jsfiddle.net/eny7nnco/2/) is what you'd get if the angle was 315deg. Note that in SVG 0deg position corresponds to 3 o'clock position on a clock. — Harry, Apr 10 '16 at 05:47

score 1 · Accepted Answer · answered Apr 10 '16 at 09:04

Like others, I suspect the author probably just used trial and error. That's mainly because that line segment doesn't seem to be pointing exactly at the centre of the circle - which would have been the obvious choice if any maths was involved.

It sounds like you may be asking how to derive an appropriate value yourself. It's just some very simple mathematics involved. We need:

The other end of the segment: (140,40)
The centre of the circle: (100,100)
The radius of the circle: 57

So the start of the segment (x1,y1) will be on the line between the centre of the circle (100,100) and the other end (140,40), at the point it crosses the circle's circumference.

The length of that line between the centre and the end (using Pythagoras' theorem) is:

= sqrt(dx^2 + dy^2)
= sqrt((140-100)^2 + (40-100)^2)
= sqrt(5200)
= 72.11

The radius of the circle is 57 so we want to find the point that is the fraction 57/72.11 along that line.

So we need to calculate the point that is at:

(startX + (57/72.11)*dx, staryY + (57/72.11) * dy)
= (100 + (57/72.11)*(140-100), 100 + (57/72.11) * (40-100) )
= (100 + 31.6, 100 - 47.43)
~= (132, 53)

Which is a bit different from the (133,50) the the author uses in the SVG.

Thanks alot ! That was helpful – Alexander Solonik Apr 10 '16 at 16:15 — Alexander Solonik, Apr 10 '16 at 16:15

SVG line intersection calculation

1 Answers1