SVG API：单个线段的长度

Question

SVG API：单个线段的长度

是否可以使用 Javascript API 获取 SVG 路径中单个段（从锚点到锚点）的长度？

Answer 1

从路径点创建伪路径，并在添加每段时读取其总长度。然后计算每个段的长度

下面是一个例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Path Segment Length</title>
  <script type="text/javascript" src="http://www.svgDiscovery.com/bowser.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Path Segment Length</h4>
(This example tested in: IE11/CH31/FF23)

<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
<center>SVG API: length of a single segment</center>
Create a pseudo path from the path points and read its total Length as each segment is added. Then do the math for each segment length
</div>
<div id="svgDiv" style='background-color:lightblue;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<path id="myPath" fill="yellow" stroke="black" stroke-width="2" d="M 144.99 81.411 Q 93.5233 122.822 165.695 164.233 Q 220.897 230.491 242.969 164.233 Q 294.436 122.822 222.264 81.411 Q 167.062 15.1534 144.99 81.411" />
<path id="lengthPath" fill="none" />
</svg>
</div>
SVG Path Segment Lengths:<div id=pathSegLengthDiv></div>
  <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
 <br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div>
<script id=myScript>
function pathSegLengths(path)
{
    var segList=path.pathSegList
    var segs=segList.numberOfItems
    var pathSegsLen=""
    var d=""
    for(var k=0;k<segs;k++)
    {
        var segObj=segList.getItem(k)
        d+=segObj.pathSegTypeAsLetter

        if(segObj.x2 && segObj.y2)
        {
            var x2 = segObj.x2
            var y2 = segObj.y2
            d+=x2+" "+y2+" "
        }
        if(segObj.x1 && segObj.y1)
        {
            var x1 = segObj.x1
            var y1 = segObj.y1
            d+=x1+" "+y1+" "
        }
        if(segObj.x && segObj.y )
        {
            var x = segObj.x
            var y = segObj.y
            d+=x+" "+y+" "
        }

        lengthPath.setAttribute("d",d)
        pathSegsLen+="Total Length @ segment "+ k+"="+lengthPath.getTotalLength()+"</br>"
    }

    pathSegLengthDiv.innerHTML=pathSegsLen
    svgSourceValue.value=svgDiv.innerHTML
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    browserVersion()
    svgSourceValue.value=svgDiv.innerHTML
    jsValue.value=myScript.text
    pathSegLengths(myPath)
}
</script>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年前
查看次数：	683 次
最近记录：	8 年，6 月前