我如何在保持其MidXmidY位置的同时缩放SVG线

Question

我有一个简单的2节点图：

<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<circle cx='100' cy='100' r='20' fill='none'
stroke='black'/>
<circle cx='300' cy='100' r='20' fill='none'
stroke='black'/>

<line x1='100' y1='100' x2='300' y2='100' stroke='black' transform='scale(1)'/>
</svg>

是否可以使用比例尺来制作线（即边缘），以使线不会进入圆（按照下面的SVG）：

<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<circle cx='100' cy='100' r='20' fill='none'
stroke='black'/>
<circle cx='300' cy='100' r='20' fill='none'
stroke='black'/>

<line x1='120' y1='100' x2='280' y2='100' stroke='black'/>
</svg>

提前谢谢！

Answer 1

平移，使线的中心在原点。缩放线。将线平移回其原始位置。

原始行长为200。需要变为200-2r = 200-40 =160。

160/200 = 0.8，这就是我们需要应用的比例。

<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<circle cx='100' cy='100' r='20' fill='none'
stroke='black'/>
<circle cx='300' cy='100' r='20' fill='none'
stroke='black'/>

<line x1='100' y1='100' x2='300' y2='100' stroke='black' transform='translate(200,100)scale(0.8)translate(-200,-100)'/>
</svg>