[英]how to start and end path on hitting a circle
I want to stop and start the path outside of the circle. 我想停下来并开始在圈子外的路径。 There are many ways that I could imagine to get the result i want:
我可以想象有很多方法可以得到我想要的结果:
But both solutions have problems (Way more difficult when having another background than one color (1) or slightly wrong start and end points when doing "lazy" math (2)) 但是这两种解决方案都有问题(在使用另一种背景而不是一种颜色的情况下难度更大(1),或者在进行“惰性”数学运算时起点和终点稍微错误(2))
I could also imagine SVG solutions, but I don't know how to search for them on google, therefor I ask you: 我也可以想象SVG解决方案,但是我不知道如何在Google上搜索它们,因此我问你:
svg { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; } circle { position: absolute; stroke: black; fill: transparent; stroke-width: 2; cursor: pointer; } path { fill:none; stroke-width:2; stroke:black; }
<svg> <circle r="40" cx="187.33333333333331" cy="149" ></circle> <circle r="40" cx="374.66666666666663" cy="149" ></circle> <path d=" M 187.33333333333331 149 Q 281 92.80000000000001 374.66666666666663 149 " ></path> </svg>
You could use dashes to hide the first and last parts of the line - since the line is curved, this is not completely precise. 您可以使用破折号隐藏线的第一部分和最后部分-由于该线是弯曲的,因此并不完全精确。
var path = document.getElementById("path") var l = path.getTotalLength() var r = 40 path.setAttribute("stroke-dasharray","0,"+r+","+(l-2*r)+","+r)
svg { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; height: 100%; width: 100%; z-index: 100; } circle { position: absolute; stroke: black; fill: transparent; stroke-width: 2; cursor: pointer; } path { fill:none; stroke-width:2; stroke:black; }
<svg><circle r="40" cx="187.33333333333331" cy="149"></circle><circle r="40" cx="374.66666666666663" cy="149"></circle><path id=path d="M 187.33333333333331 149 Q 281 92.80000000000001 374.66666666666663 149"></path></svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.