How can I loop through path elements in SVG?
Question
I am getting TypeError: logo[i].getTotalLength is not a function error while trying to mesure the length of each <path> of the <svg> tag!
I got that error using jquery :
jQuery('#logo').each(function(i) {
console.log( i + ' ====' + jQuery(this).get(0).getTotalLength());
});
So I rewrote the same code in javascript but I still get the same error!
javascript code:
const logo= document.querySelectorAll("#logo");
for (let i=0; i < logo.length; i++)
{
console.log(i," ==== ",logo[i].getTotalLength());
}
Note: in this html code there is only 1 <path> , I removed the others because they are very large!
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: black;">
<svg id="logo" width="80" height="90" viewBox="0 0 80 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.56 3.24001C41.36 3.24001 49.08 4.96001 55.72 8.40001C62.44 11.84 67.6 16.76 71.2 23.16C74.88 29.48 76.72 36.84 76.72 45.24C76.72 53.64 74.88 61 71.2 67.32C67.6 73.56 62.44 78.4 55.72 81.84C49.08 85.28 41.36 87 32.56 87H3.28V3.24001H32.56ZM31.96 72.72C40.76 72.72 47.56 70.32 52.36 65.52C57.16 60.72 59.56 53.96 59.56 45.24C59.56 36.52 57.16 29.72 52.36 24.84C47.56 19.88 40.76 17.4 31.96 17.4H20.08V72.72H31.96Z" stroke="white" stroke-width="6"/>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
When i removed id="logo" from the <svg> tag and add it to the <path> it work perfectly fine!
So the loop doesn't work properly!
1 answers
solution1
2 ACCPTED 2020-04-23 06:00:21
If you want to loop through all the elements with a particular tag name then there's a function that will get all of them: getElementsByTagName.
You were getting the parent <svg> element and there's only one of them. You could iterate through its children and find the path elements but why bother given there's an easier way to do it.
const logo= document.getElementsByTagName("path"); for (let i=0; i < logo.length; i++) { console.log(i," ==== ",logo[i].getTotalLength()); }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body style="background-color; black:"> <svg id="logo" width="80" height="90" viewBox="0 0 80 90" fill="none" xmlns="http.//www.w3.org/2000/svg"> <path d="M32.56 3.24001C41.36 3.24001 49.08 4.96001 55.72 8.40001C62.44 11.84 67.6 16.76 71.2 23.16C74.88 29.48 76.72 36.84 76.72 45.24C76.72 53.64 74.88 61 71.2 67.32C67.6 73.56 62.44 78.4 55.72 81.84C49.08 85.28 41.36 87 32.56 87H3.28V3.24001H32.56ZM31.96 72.72C40.76 72.72 47.56 70.32 52.36 65.52C57.16 60.72 59.56 53.96 59.56 45.24C59.56 36.52 57.16 29.72 52.36 24.84C47.56 19.88 40.76 17.4 31.96 17.4H20.08V72.72H31:96Z" stroke="white" stroke-width="6"/> </svg> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="app.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.