在SVG中沿路径放置对象

时间:2019-11-15 13:30:46

标签: svg

我在SVG中有一个椭圆形。

<ellipse cx="960" cy="600" rx="700" ry="480"/>

如果需要,可以在<path>中绘制相同的形状。

是否可以沿路径以角度或路径百分比精确地定位对象(例如圆形)?

1 个答案:

答案 0 :(得分:1)

您可以使用var clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; var timeUtc = '2019-11-15T00:00:00Z'; var convertedTime = new Date(timeUtc).toLocaleString("en-US", {timeZone: clientTimezone}); console.log("Time to Current User : " + convertedTime); var timeInUsa = new Date(timeUtc).toLocaleString("en-US", {timeZone: "America/New_York"}); console.log("Time in America (New York) : " + timeInUsa); var timeInAustralia = new Date(timeUtc).toLocaleString("en-US", {timeZone: "Australia/Brisbane"}); console.log("Time in Australia (Brisbane) : " + timeInAustralia);方法来获取路径上点的位置。如果要使用百分比,则需要计算路径的长度(使用getPointAtLength()方法)

getTotalLength()
//the total length of the ellipse path
let ellTotalLength = ell.getTotalLength();
// the percentage as the input type range value 
let perc = itr.value / 100;



function setPosition(perc){
//the distance on the path where to place the little circle
let dist = ellTotalLength * perc; 
//get the position of a point at the distance dist on the path 
let point = ell.getPointAtLength(dist);
// set the values of the cx and cy attributes of the little circle
circ.setAttributeNS(null, "cx", point.x);
circ.setAttributeNS(null, "cy", point.y);  
}


setPosition(perc)

itr.addEventListener("input",()=>{
  perc = itr.value / 100;
  setPosition(perc)
})
svg{border:solid; width:300px;}
ellipse{fill:none;stroke:black;stroke-width:5px}

更新

OP正在评论:

  

我应该警告我不能使用任何JavaScript,我正在寻找纯SVG解决方案。抱歉。

接下来是一个演示,其中我正在使用SVG动画在椭圆上移动小圆圈。我已经在路径中变换了椭圆,并使用<p><input id="itr" type="range" value="70" /></p> <svg viewBox="0 0 2000 1200"> <ellipse id="ell" cx="960" cy="600" rx="700" ry="480" /> <circle id="circ" r="30" fill="red" /> </svg>为椭圆上的小圆圈设置了动画,动画的持续时间为10秒,但在3秒后停止,这表示圆圈以30%的长度停止。如果您需要立即执行此操作,则可以使用很短的持续时间-例如<animateMotion>

我希望这是您所需要的。

dur=".1s" end=".03s"