svg js动态插入use

最新推荐文章于 2024-09-02 08:43:47 发布

冬至1931

最新推荐文章于 2024-09-02 08:43:47 发布

阅读量462

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/dzhi1931/article/details/112360949

版权

SVG.js 动态插入 use元素路径引用 SVG图形

关键词由CSDN通过智能技术生成

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

svg js动态插入use

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- viewBox: 基于里面有几个元素, width height基于viewBox -->
    <svg viewBox="0 0 1250 100" width="1000" height="100" 
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <g id="path">
            <path d="m0 0 L200 0 L250 50 L200 100 L0 100 Z" fill="green" />
        </g>
        <defs>
            <g id="myPath">
                <path d="m0 0 L50 50 L0 100 L200 100 L250 50 L200 0 Z" fill="green" />
            </g>
        </defs>
        <use xlink:href="#path" x="0" y="0"></use>
    </svg>
    <script>
        let svg = document.querySelector('svg')
        for(let i = 0; i < 4; i++){
            let use = document.createElementNS(
                "http://www.w3.org/2000/svg",
                "use"
            )
            use.setAttributeNS(
                "http://www.w3.org/1999/xlink", 
                "href", 
                "#myPath"
            );
            use.setAttribute("x", 230*(i+1))
            use.setAttribute("y", 0)
            svg.appendChild(use)
        }
    </script>
</body>

</html>