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

最新推荐文章于 2024-08-16 09:35:39 发布

earth_small_ma

最新推荐文章于 2024-08-16 09:35:39 发布

阅读量7.9k

点赞数

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

本文链接：https://blog.csdn.net/earth_smallma/article/details/81227400

版权

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

摘要由CSDN通过智能技术生成

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