Saransh
Reputation: 147
Not able to read SVG elements in JavaScript
Iam working on a project that has an svg inside a section tag. Iam planning to start animations on scroll using intersection observer. I have placed the svg file directly inside the HTML document. When I try to read an svg element in js it returns a null element.
HTML code :
<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>
The js code
var a = document.getElementById("_3TreeLeft");
console.log(a);
Iam getting output as NULL
null
. HOw do I access the elements in svg???
Upvotes: 1
Views: 105
Answers (1)
Hien Nguyen
Reputation: 18973
You need wrap your code inside document ready event as
document.addEventListener("DOMContentLoaded", function(event) {
var a = document.getElementById("_3TreeLeft");
console.log("_3TreeLeft:" + a);
});
document.addEventListener("DOMContentLoaded", function(event) {
var a = document.getElementById("_3TreeLeft");
console.log("_3TreeLeft:" + a);
});<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>Upvotes: 2
Related Questions
- Why I cannot reach the svg objects using from html object?
- Can't access an element in svg with JS
- Why svg elements created from JavaScript are not visible?
- SVG elements appearing in DOM, but not visible
- Javascripts don't work with SVG
- Accessing embedded SVG through Javascript
- Not displayed SVG elements
- access SVG elements via Javascript
- Cannot display parsed SVG node in the HTML DOM. Why?
- Access SVG inside HTML