SVG之获取路径长度，创建获取SVG元素(6)

最新推荐文章于 2025-05-28 15:41:08 发布

earth_small_ma

最新推荐文章于 2025-05-28 15:41:08 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： SVG 文章标签： svg getTotalLength getPointAtLength

本文链接：https://blog.youkuaiyun.com/earth_smallma/article/details/81227400

SVG 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在SVG中获取元素，特别是路径(path)的长度以及根据长度获取路径上的点。通过getElementsByTagNameNS获取SVG元素，使用createElementNS创建SVG元素。重点讲解path的getTotalLength方法获取总长度及getPointAtLength方法获取特定长度对应的坐标点。需要注意，这些方法在不同浏览器的兼容性差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG之获取路径长度，创建获取SVG元素(6)

说明：代码中，所有的namespace(命名空间)是固定的。需要记住，这是对SVG元素进行DOM操作所必需的

获取SVG元素

注意：是获取SVG元素哦！不是svg元素。意思就是获取所有SVG标签元素

document.getElementsByTagNameNS(namespace, ‘SVG标签名’)

上述方法用来获取SVG元素

<svg id="svg" width="500" height="500">
    <rect x="10" y="10" width="100" height="100"></rect>
</svg>
<script>
    var namespace = 'http://www.w3.org/2000/svg',
        svg = document.getElementsByTagNameNS(namespace, 'svg')[0],
        rect = document.getElementsByTagNameNS(namespace, 'rect')[0];
</script>

创建SVG元素

<script>
    var namespace = 'http://www.w3.org/2000/svg';

    var svg = document.createElementNS(namespace, 'svg');
    svg.setAttribute('id', 'svg');
    svg.setAttribute('width', 500);
    svg.setAttribute('height', 500);
    svg.style.border = '1px solid #ccc';

    var rect = document.createElementNS(namespace, 'rect');
    rect.setAttribute('x', 10);
    rect.setAttribute('y', 10);
    rect.setAttribute('width', 100);
    rect.setAttribute('height', 100);
    rect.setAttribute('fill', '#ccc');

    svg.appendChild(rect);
    document.body.appendChild(svg);
</script>

创建SVG元素使用：
document.createElementNS(namespace, ‘SVG元素名’);

通过setAttribute为SVG元素设置属性

获取路径长度

‘path标签的id.getTotalLength()’可以获取path路径总长度

也可以‘path标签对象.getTotalLength()’

这儿通过一个demo来演示该方法的使用

<body>
    <svg id="svg" width="500" height="500">
        <path id="svg_1" d="m160.16243,297.01148c-20.41264,-1.82538 -39.37267,-11.75377 -35.52183,-23.34357c1.94899,-12.72323 21.03886,-22.96331 40.24619,-29.7101c25.56244,-9.21941 60.51346,-12.64424 88.68377,-4.69267c1.65061,-64.13301 0.7099,-128.28208 0.95994,-192.42235c17.76435,-2.27874 12.02058,10.04285 16.05515,15.74104c3.84983,16.75575 25.06346,29.9034 46.17916,41.6436c26.19748,14.7569 54.01548,30.40367 62.53061,50.84838c9.2983,23.72033 -5.56654,47.98646 -24.85716,69.24441c-1.39689,6.81297 -24.98613,16.66976 -13.74738,4.35837c18.92408,-21.06076 34.55781,-45.31573 21.64092,-68.63722c-12.30063,-23.27046 -50.64079,-42.70477 -96.28208,-46.1895c-0.29497,49.13731 0.71828,98.28391 -1.08168,147.41335c-4.48704,14.47181 -28.21357,25.20976 -52.0071,31.34124c-16.40677,3.78442 -34.92408,6.07414 -52.79847,4.40503l-0.00002,-0.00002z"/>
    </svg>
    <script>
        var namespace = 'http://www.w3.org/2000/svg',
            path = document.getElementsByTagNameNS(namespace, 'path')[0],
            pathLen = svg_1.getTotalLength();//获取路径总长度

        path.style.strokeDasharray = pathLen;
        path.style.strokeDashoffset = pathLen;
        path.style.animation = 'move 5s linear forwards';
    </script>
</body>

‘path标签的id.getPointAtLength(s)’可以获取路径上与起始点距离为s长度的点的坐标
也可以‘path标签对象.getPointAtLength(s)’

注意：获取的点的坐标是相对于svg画布原点的绝对坐标

<svg id="svg" width="500" height="500">
    <path d="M 10 10 l 100 100" id="svg_1"></path>
</svg>
<script>
    var namespace = 'http://www.w3.org/2000/svg',
        path = document.getElementsByTagNameNS(namespace, 'path')[0],
        pos = path.getPointAtLength(10);
</script>