html - SVG线相交计算

Question

我正在浏览 this SVG ，代码也可以在下面找到:

<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>

我想知道的是下面这行代码:

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

即线的 x1 属性的值，现在如果您将此值更改为大于 133 的任何值，您会注意到线开始的地方和圆圈处有一个中断。我相信此 SVG 的作者已将 x1 的值精心设计为 133。我似乎无法弄清楚他们是如何得出 133 的结论的。

当然，通过试错可以得出结论，但这不是我感兴趣的答案。我想知道作者究竟是如何计算起跑线133的值，使其恰好触及圆的边缘。

Answer 1

和其他人一样，我怀疑作者可能只是在反复试验。这主要是因为该线段似乎并不完全指向圆心 - 如果涉及任何数学，这将是显而易见的选择。

听起来您可能在问如何自己得出适当的值。这只是涉及一些非常简单的数学。我们需要:

• 线段的另一端:(140,40)
• 圆心:(100,100)
• 圆的半径:57

因此线段 (x1,y1) 的起点将位于圆心 (100,100) 和另一端 (140,40) 之间的直线上，即它穿过圆周的点。

中心和末端之间的那条线的长度(使用毕达哥拉斯定理)是:

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

圆的半径是 57，所以我们想沿着这条线找到分数为 57/72.11 的点。

因此我们需要计算位于的点:

(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)

这与作者在 SVG 中使用的 (133,50) 有点不同。