css SVG直线求交计算

hsgswve4 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(123)

我刚刚通过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的值，使其正好接触圆的边缘。

css

来源：https://stackoverflow.com/questions/36524890/svg-line-intersection-calculation

1条答案

按热度按时间

mwngjboj1#

像其他人一样，我怀疑作者可能只是使用了试错法。这主要是因为线段似乎并不准确地指向圆心--如果涉及到数学的话，这是显而易见的选择。
听起来你可能会问如何自己推导出一个合适的值。这只是一些非常简单的数学问题。我们需要：

段的另一端：（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）有点不同。

赞(0）回复(0）举报 2023-04-01

我来回答

css SVG直线求交计算

1条答案

相关问题

热门标签

最新问答