Question

我刚刚浏览了这个svg HERE ，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）略有不同。

SVG线交叉计算。

1 个答案: