文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >无法在JavaScript中读取SVG元素

问无法在JavaScript中读取SVG元素
EN

Stack Overflow用户
提问于 2020-06-25 12:27:30
回答 1查看 91关注 0票数 1

Iam正在处理一个在节标记中有svg的项目。我计划使用交叉观察者在滚动上启动动画。我已经将svg文件直接放置在HTML文档中。当我试图读取js中的svg元素时，它返回一个空元素。

HTML代码：

代码语言：javascript
运行
复制
 <body>
    <section id="section1"></section>
    <section id="section2">
        <svg id="alphasvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1366 723">
            <defs>
                <style> .cls-1 {
                    clip-path: url(#clip-winter);
                  }
                
                  .cls-2 {
                    stroke: #707070;
                    fill: url(#linear-gradient);
                  }
                
                  .cls-16, .cls-3 {
                    fill: #176d81;
                  }
                
                  .cls-21, .cls-4, .cls-5, .cls-6, .cls-7 {
                    fill: none;
                  }
                
                  .cls-4, .cls-5, .cls-6, .cls-7 {
                    stroke: #fff;
                  }
                
                  .cls-4 {
                    stroke-linecap: round;
                  }
                
                  .cls-4, .cls-5 {
                    stroke-width: 3px;
                  }
                
                  .cls-6 {
                    stroke-width: 2px;
                  }
                
                  .cls-8 {
                    fill: #0d3446;
                  }
                
                  .cls-9 {
                    fill: #71adb5;
                  }
                
                  .cls-10 {
                    fill: #2f2e41;
                  }
                
                  .cls-11 {
                    fill: #ffb8b8;
                  }
                
                  .cls-12 {
                    fill: #d0cde1;
                  }
                
                  .cls-13 {
                    fill: #ff6584;
                  }
                
                  .cls-14 {
                    fill: #575a89;
                  }
                
                  .cls-15, .cls-16 {
                    opacity: 0.15;
                  }
                
                  .cls-17 {
                    fill: #a0616a;
                  }
                
                  .cls-18 {
                    fill: #6c63ff;
                  }
                
                  .cls-19 {
                    fill: #3f3d56;
                  }
                
                  .cls-20 {
                    stroke: none;
                  }
                
                  .cls-22 {
                    fill: #fff;
                  }
                </style>
          
              <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#6bb2d0"/>
                <stop offset="1" stop-color="#c7eafd"/>
              </linearGradient>
              <clipPath id="clip-winter">
                <rect width="1366" height="723"/>
              </clipPath>
            </defs>
            <g id="winter" class="cls-1">
              <rect class="cls-22" width="1366" height="723"/>
              <g id="SkyBackground" class="cls-2" transform="translate(0 -45)">
                <rect class="cls-20" width="1366" height="768"/>
                <rect class="cls-21" x="0.5" y="0.5" width="1365" height="767"/>
              </g>
              <g id="_3TreeLeft" class="slide-in-bck-bl" data-name="3TreeLeft" transform="translate(0 29.47)">
                <path id="Path_430" data-name="Path 430" class="cls-3" d="M84.156,0l69.216,340.758,14.939,73.547s-42.078,23.74-84.156,23.74S0,414.305,0,414.305Z" transform="translate(29 -32)"/>
                <line id="Line_1" data-name="Line 1" class="cls-4" y2="361.592" transform="translate(113.618 22.1)"/>
                <line id="Line_2" data-name="Line 2" class="cls-5" y1="27.744" x2="62.886" transform="translate(113.618 330.055)"/>
                <line id="Line_4" data-name="Line 4" class="cls-5" y1="28.668" x2="55.487" transform="translate(113.618 269.943)"/>
                <line id="Line_5" data-name="Line 5" class="cls-6" x1="39.766" y1="24.044" transform="translate(72.003 249.598)"/>
                <line id="Line_6" data-name="Line 6" class="cls-6" y1="23.12" x2="40.691" transform="translate(113.618 219.08)"/>
                <line id="Line_7" data-name="Line 7" class="cls-6" x1="29.593" y1="21.27" transform="translate(84.025 197.81)"/>
                <line id="Line_8" data-name="Line 8" class="cls-6" y1="24.044" x2="31.443" transform="translate(113.618 173.765)"/>
                <line id="Line_9" data-name="Line 9" class="cls-6" x1="29.593" y1="19.421" transform="translate(84.025 154.345)"/>
                <line id="Line_10" data-name="Line 10" class="cls-7" y1="18.496" x2="31.443" transform="translate(113.618 135.849)"/>
                <line id="Line_11" data-name="Line 11" class="cls-7" x1="15.721" y1="12.022" transform="translate(97.897 123.827)"/>
                <line id="Line_12" data-name="Line 12" class="cls-7" y1="19.421" x2="20.345" transform="translate(113.618 88.685)"/>
                <line id="Line_13" data-name="Line 13" class="cls-7" x1="12.947" y1="17.571" transform="translate(98.821 66.49)"/>
                <line id="Line_14" data-name="Line 14" class="cls-5" x1="60.111" y1="29.593" transform="translate(53.507 298.612)"/>
                <line id="Line_15" data-name="Line 15" class="cls-5" x1="68.434" y1="31.443" transform="translate(45.184 352.249)"/>
                <path id="Path_430-2" data-name="Path 430" class="cls-8" d="M57.008,0,103.9,230.833l10.12,49.822s-28.5,16.082-57.008,16.082S0,280.655,0,280.655Z" transform="translate(149.222 55.855)"/>
                <line id="Line_1-2" data-name="Line 1" class="cls-4" y2="244.946" transform="translate(206.544 92.503)"/>
                <line id="Line_2-2" data-name="Line 2" class="cls-5" y1="18.794" x2="42.599" transform="translate(206.544 301.115)"/>
                <line id="Line_4-2" data-name="Line 4" class="cls-5" y1="19.42" x2="37.588" transform="translate(206.544 260.395)"/>
                <line id="Line_5-2" data-name="Line 5" class="cls-6" x1="26.938" y1="16.288" transform="translate(178.353 246.612)"/>
                <line id="Line_6-2" data-name="Line 6" class="cls-6" y1="15.662" x2="27.564" transform="translate(206.544 225.939)"/>
                <line id="Line_7-2" data-name="Line 7" class="cls-6" x1="20.047" y1="14.409" transform="translate(186.497 211.531)"/>
                <line id="Line_8-2" data-name="Line 8" class="cls-6" y1="16.288" x2="21.3" transform="translate(206.544 195.243)"/>
                <line id="Line_9-2" data-name="Line 9" class="cls-6" x1="20.047" y1="13.156" transform="translate(186.497 182.087)"/>
                <line id="Line_10-2" data-name="Line 10" class="cls-7" y1="12.529" x2="21.3" transform="translate(206.544 169.558)"/>
                <line id="Line_11-2" data-name="Line 11" class="cls-7" x1="10.65" y1="8.144" transform="translate(195.894 161.414)"/>
                <line id="Line_12-2" data-name="Line 12" class="cls-7" y1="13.156" x2="13.782" transform="translate(206.544 137.608)"/>
                <line id="Line_13-2" data-name="Line 13" class="cls-7" x1="8.77" y1="11.903" transform="translate(196.52 122.573)"/>
                <line id="Line_14-2" data-name="Line 14" class="cls-5" x1="40.72" y1="20.047" transform="translate(165.824 279.815)"/>
                <line id="Line_15-2" data-name="Line 15" class="cls-5" x1="46.358" y1="21.3" transform="translate(160.186 316.15)"/>
                <path id="Path_430-3" data-name="Path 430" class="cls-9" d="M122.969-.272l101.139,362.34,21.829,78.206s-61.484,25.244-122.969,25.244S0,440.273,0,440.273l100.208-359Z" transform="translate(198.236 24.684)"/>
                <line id="Line_1-3" data-name="Line 1" class="cls-4" y2="389.336" transform="translate(321.881 78.512)"/>
                <line id="Line_2-3" data-name="Line 2" class="cls-5" y1="27.744" x2="62.886" transform="translate(360.859 414.21)"/>
                <line id="Line_4-3" data-name="Line 4" class="cls-5" y1="28.668" x2="55.487" transform="translate(340.935 346.818)"/>
                <line id="Line_5-3" data-name="Line 5" class="cls-6" x1="39.766" y1="24.044" transform="translate(267.168 324.881)"/>
                <line id="Line_6-3" data-name="Line 6" class="cls-6" y1="23.12" x2="40.691" transform="translate(334.244 292.28)"/>
                <line id="Line_7-3" data-name="Line 7" class="cls-6" x1="29.593" y1="21.27" transform="translate(284.021 269.52)"/>
                <line id="Line_8-3" data-name="Line 8" class="cls-6" y1="24.044" x2="31.443" transform="translate(330.792 243.966)"/>
                <line id="Line_9-3" data-name="Line 9" class="cls-6" x1="29.593" y1="19.421" transform="translate(284.021 223.107)"/>
                <line id="Line_10-3" data-name="Line 10" class="cls-7" y1="18.496" x2="31.443" transform="translate(330.792 203.36)"/>
                <line id="Line_11-3" data-name="Line 11" class="cls-7" x1="15.721" y1="12.022" transform="translate(302.165 190.387)"/>
                <line id="Line_12-3" data-name="Line 12" class="cls-7" y1="19.421" x2="20.345" transform="translate(327.217 153.095)"/>
                <line id="Line_13-3" data-name="Line 13" class="cls-7" x1="12.947" y1="17.571" transform="translate(302.929 129.401)"/>
                <line id="Line_14-3" data-name="Line 14" class="cls-5" x1="60.111" y1="29.593" transform="translate(222.743 377.48)"/>
                <line id="Line_15-3" data-name="Line 15" class="cls-5" x1="68.434" y1="31.443" transform="translate(214.42 436.405)"/>
                <path id="Path_236" data-name="Path 236" class="cls-10" d="M40.225,418.745c.03-.1.063-.195.093-.292-.013.043-.03.083-.043.126Z" transform="translate(426.697 -69.167)"/>
              </g>

js代码

代码语言：javascript
运行
复制
 var a = document.getElementById("_3TreeLeft");
console.log(a);

将输出作为NULL获得

代码语言：javascript
运行
复制
null

。HOw我可以访问svg中的元素吗？

javascript
html
svg
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-25 12:32:21

您需要将代码包装在文档ready事件中，如

代码语言：javascript
运行
复制
document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById("_3TreeLeft");
    console.log("_3TreeLeft:" + a);
});

​

代码语言：javascript
运行
复制
document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById("_3TreeLeft");
    console.log("_3TreeLeft:" + a);
});
代码语言：javascript
运行
复制
<body>
    <section id="section1"></section>
    <section id="section2">
        <svg id="alphasvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1366 723">
            <defs>
                <style> .cls-1 {
                    clip-path: url(#clip-winter);
                  }
                
                  .cls-2 {
                    stroke: #707070;
                    fill: url(#linear-gradient);
                  }
                
                  .cls-16, .cls-3 {
                    fill: #176d81;
                  }
                
                  .cls-21, .cls-4, .cls-5, .cls-6, .cls-7 {
                    fill: none;
                  }
                
                  .cls-4, .cls-5, .cls-6, .cls-7 {
                    stroke: #fff;
                  }
                
                  .cls-4 {
                    stroke-linecap: round;
                  }
                
                  .cls-4, .cls-5 {
                    stroke-width: 3px;
                  }
                
                  .cls-6 {
                    stroke-width: 2px;
                  }
                
                  .cls-8 {
                    fill: #0d3446;
                  }
                
                  .cls-9 {
                    fill: #71adb5;
                  }
                
                  .cls-10 {
                    fill: #2f2e41;
                  }
                
                  .cls-11 {
                    fill: #ffb8b8;
                  }
                
                  .cls-12 {
                    fill: #d0cde1;
                  }
                
                  .cls-13 {
                    fill: #ff6584;
                  }
                
                  .cls-14 {
                    fill: #575a89;
                  }
                
                  .cls-15, .cls-16 {
                    opacity: 0.15;
                  }
                
                  .cls-17 {
                    fill: #a0616a;
                  }
                
                  .cls-18 {
                    fill: #6c63ff;
                  }
                
                  .cls-19 {
                    fill: #3f3d56;
                  }
                
                  .cls-20 {
                    stroke: none;
                  }
                
                  .cls-22 {
                    fill: #fff;
                  }
                </style>
          
              <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#6bb2d0"/>
                <stop offset="1" stop-color="#c7eafd"/>
              </linearGradient>
              <clipPath id="clip-winter">
                <rect width="1366" height="723"/>
              </clipPath>
            </defs>
            <g id="winter" class="cls-1">
              <rect class="cls-22" width="1366" height="723"/>
              <g id="SkyBackground" class="cls-2" transform="translate(0 -45)">
                <rect class="cls-20" width="1366" height="768"/>
                <rect class="cls-21" x="0.5" y="0.5" width="1365" height="767"/>
              </g>
              <g id="_3TreeLeft" class="slide-in-bck-bl" data-name="3TreeLeft" transform="translate(0 29.47)">
                <path id="Path_430" data-name="Path 430" class="cls-3" d="M84.156,0l69.216,340.758,14.939,73.547s-42.078,23.74-84.156,23.74S0,414.305,0,414.305Z" transform="translate(29 -32)"/>
                <line id="Line_1" data-name="Line 1" class="cls-4" y2="361.592" transform="translate(113.618 22.1)"/>
                <line id="Line_2" data-name="Line 2" class="cls-5" y1="27.744" x2="62.886" transform="translate(113.618 330.055)"/>
                <line id="Line_4" data-name="Line 4" class="cls-5" y1="28.668" x2="55.487" transform="translate(113.618 269.943)"/>
                <line id="Line_5" data-name="Line 5" class="cls-6" x1="39.766" y1="24.044" transform="translate(72.003 249.598)"/>
                <line id="Line_6" data-name="Line 6" class="cls-6" y1="23.12" x2="40.691" transform="translate(113.618 219.08)"/>
                <line id="Line_7" data-name="Line 7" class="cls-6" x1="29.593" y1="21.27" transform="translate(84.025 197.81)"/>
                <line id="Line_8" data-name="Line 8" class="cls-6" y1="24.044" x2="31.443" transform="translate(113.618 173.765)"/>
                <line id="Line_9" data-name="Line 9" class="cls-6" x1="29.593" y1="19.421" transform="translate(84.025 154.345)"/>
                <line id="Line_10" data-name="Line 10" class="cls-7" y1="18.496" x2="31.443" transform="translate(113.618 135.849)"/>
                <line id="Line_11" data-name="Line 11" class="cls-7" x1="15.721" y1="12.022" transform="translate(97.897 123.827)"/>
                <line id="Line_12" data-name="Line 12" class="cls-7" y1="19.421" x2="20.345" transform="translate(113.618 88.685)"/>
                <line id="Line_13" data-name="Line 13" class="cls-7" x1="12.947" y1="17.571" transform="translate(98.821 66.49)"/>
                <line id="Line_14" data-name="Line 14" class="cls-5" x1="60.111" y1="29.593" transform="translate(53.507 298.612)"/>
                <line id="Line_15" data-name="Line 15" class="cls-5" x1="68.434" y1="31.443" transform="translate(45.184 352.249)"/>
                <path id="Path_430-2" data-name="Path 430" class="cls-8" d="M57.008,0,103.9,230.833l10.12,49.822s-28.5,16.082-57.008,16.082S0,280.655,0,280.655Z" transform="translate(149.222 55.855)"/>
                <line id="Line_1-2" data-name="Line 1" class="cls-4" y2="244.946" transform="translate(206.544 92.503)"/>
                <line id="Line_2-2" data-name="Line 2" class="cls-5" y1="18.794" x2="42.599" transform="translate(206.544 301.115)"/>
                <line id="Line_4-2" data-name="Line 4" class="cls-5" y1="19.42" x2="37.588" transform="translate(206.544 260.395)"/>
                <line id="Line_5-2" data-name="Line 5" class="cls-6" x1="26.938" y1="16.288" transform="translate(178.353 246.612)"/>
                <line id="Line_6-2" data-name="Line 6" class="cls-6" y1="15.662" x2="27.564" transform="translate(206.544 225.939)"/>
                <line id="Line_7-2" data-name="Line 7" class="cls-6" x1="20.047" y1="14.409" transform="translate(186.497 211.531)"/>
                <line id="Line_8-2" data-name="Line 8" class="cls-6" y1="16.288" x2="21.3" transform="translate(206.544 195.243)"/>
                <line id="Line_9-2" data-name="Line 9" class="cls-6" x1="20.047" y1="13.156" transform="translate(186.497 182.087)"/>
                <line id="Line_10-2" data-name="Line 10" class="cls-7" y1="12.529" x2="21.3" transform="translate(206.544 169.558)"/>
                <line id="Line_11-2" data-name="Line 11" class="cls-7" x1="10.65" y1="8.144" transform="translate(195.894 161.414)"/>
                <line id="Line_12-2" data-name="Line 12" class="cls-7" y1="13.156" x2="13.782" transform="translate(206.544 137.608)"/>
                <line id="Line_13-2" data-name="Line 13" class="cls-7" x1="8.77" y1="11.903" transform="translate(196.52 122.573)"/>
                <line id="Line_14-2" data-name="Line 14" class="cls-5" x1="40.72" y1="20.047" transform="translate(165.824 279.815)"/>
                <line id="Line_15-2" data-name="Line 15" class="cls-5" x1="46.358" y1="21.3" transform="translate(160.186 316.15)"/>
                <path id="Path_430-3" data-name="Path 430" class="cls-9" d="M122.969-.272l101.139,362.34,21.829,78.206s-61.484,25.244-122.969,25.244S0,440.273,0,440.273l100.208-359Z" transform="translate(198.236 24.684)"/>
                <line id="Line_1-3" data-name="Line 1" class="cls-4" y2="389.336" transform="translate(321.881 78.512)"/>
                <line id="Line_2-3" data-name="Line 2" class="cls-5" y1="27.744" x2="62.886" transform="translate(360.859 414.21)"/>
                <line id="Line_4-3" data-name="Line 4" class="cls-5" y1="28.668" x2="55.487" transform="translate(340.935 346.818)"/>
                <line id="Line_5-3" data-name="Line 5" class="cls-6" x1="39.766" y1="24.044" transform="translate(267.168 324.881)"/>
                <line id="Line_6-3" data-name="Line 6" class="cls-6" y1="23.12" x2="40.691" transform="translate(334.244 292.28)"/>
                <line id="Line_7-3" data-name="Line 7" class="cls-6" x1="29.593" y1="21.27" transform="translate(284.021 269.52)"/>
                <line id="Line_8-3" data-name="Line 8" class="cls-6" y1="24.044" x2="31.443" transform="translate(330.792 243.966)"/>
                <line id="Line_9-3" data-name="Line 9" class="cls-6" x1="29.593" y1="19.421" transform="translate(284.021 223.107)"/>
                <line id="Line_10-3" data-name="Line 10" class="cls-7" y1="18.496" x2="31.443" transform="translate(330.792 203.36)"/>
                <line id="Line_11-3" data-name="Line 11" class="cls-7" x1="15.721" y1="12.022" transform="translate(302.165 190.387)"/>
                <line id="Line_12-3" data-name="Line 12" class="cls-7" y1="19.421" x2="20.345" transform="translate(327.217 153.095)"/>
                <line id="Line_13-3" data-name="Line 13" class="cls-7" x1="12.947" y1="17.571" transform="translate(302.929 129.401)"/>
                <line id="Line_14-3" data-name="Line 14" class="cls-5" x1="60.111" y1="29.593" transform="translate(222.743 377.48)"/>
                <line id="Line_15-3" data-name="Line 15" class="cls-5" x1="68.434" y1="31.443" transform="translate(214.42 436.405)"/>
                <path id="Path_236" data-name="Path 236" class="cls-10" d="M40.225,418.745c.03-.1.063-.195.093-.292-.013.043-.03.083-.043.126Z" transform="translate(426.697 -69.167)"/>
              </g>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62575340

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档