Fatal编程技术网
  • javascript/
  • 无法在JavaScript中读取SVG元素

无法在JavaScript中读取SVG元素

javascript html svg

无法在JavaScript中读取SVG元素,javascript,html,svg,Javascript,Html,Svg,Iam正在处理一个在节标记中包含svg的项目。Iam计划使用交叉点观察者启动滚动动画。我将svg文件直接放在HTML文档中。当我尝试读取js中的svg元素时，它返回一个空元素 HTML代码： <body> <section id="section1"></section> <section id="section2"> <svg id="alphasvg&qu

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

HTML代码：

 <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>
我得到的输出为空

null
。如何访问svg中的元素？

您需要将代码包装到文档
就绪
事件中

document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById("_3TreeLeft");
    console.log("_3TreeLeft:" + a);
});

document.addEventListener（“DOMContentLoaded”），函数（事件）{
var a=document.getElementById（“\u 3TreeLeft”）；
console.log（“\u3treeft:”+a）；
});


.cls-1{
剪辑路径：url（#剪辑冬季）；
}
.cls-2{
行程：#707070；
填充：url（#线性渐变）；
}
.cls-16、.cls-3{
填充：#176d81；
}
.cls-21、.cls-4、.cls-5、.cls-6、.cls-7{
填充：无；
}
.cls-4、.cls-5、.cls-6、.cls-7{
冲程：#fff；
}
.cls-4{
笔划线头：圆形；
}
.cls-4、.cls-5{
笔画宽度：3px；
}
.cls-6{
笔画宽度：2px；
}
.cls-8{
填充：#0d3446；
}
.cls-9{
填充：#71adb5；
}
.cls-10{
填充：#2f2e41；
}
.cls-11{
填充：#ffb8b8；
}
.cls-12{
填充：#d0cde1；
}
.cls-13{
填充：#ff6584；
}
.cls-14{
填充：#575a89；
}
.cls-15、.cls-16{
不透明度：0.15；
}
.cls-17{
填充：#a0616a；
}
.cls-18{
填充：#6c63ff；
}
.cls-19{
填充：#3f3d56；
}
.cls-20{
中风：无；
}
.cls-22{
填充：#fff；
}

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


document.addEventListener("DOMContentLoaded", function(event) {
    var a = document.getElementById("_3TreeLeft");
    console.log("_3TreeLeft:" + a);
});




document.addEventListener（“DOMContentLoaded”），函数（事件）{
var a=document.getElementById（“\u 3TreeLeft”）；
console.log（“\u3treeft:”+a）；
});


.cls-1{
剪辑路径：url（#剪辑冬季）；
}
.cls-2{
行程：#707070；
填充：url（#线性渐变）；
}
.cls-16、.cls-3{
填充：#176d81；
}
.cls-21、.cls-4、.cls-5、.cls-6、.cls-7{
填充：无；
}
.cls-4、.cls-5、.cls-6、.cls-7{
冲程：#fff；
}
.cls-4{
笔划线头：圆形；
}
.cls-4、.cls-5{
笔画宽度：3px；
}
.cls-6{
笔画宽度：2px；
}
.cls-8{
填充：#0d3446；
}
.cls-9{
填充：#71adb5；
}
.cls-10{
填充：#2f2e41；
}
.cls-11{
填充：#ffb8b8；
}
.cls-12{
填充：#d0cde1；
}
.cls-13{
填充：#ff6584；
}
.cls-14{
填充：#575a89；
}
.cls-15、.cls-16{
不透明度：0.15；