Saya mendapatkan kesalahan TypeError: logo[i].getTotalLength is not a function saat mencoba mengukur panjang setiap <path> dari tag <svg>!

Saya mendapatkan kesalahan itu menggunakan jquery :

jQuery('#logo').each(function(i) {
        console.log( i + ' ====' + jQuery(this).get(0).getTotalLength());
   });

Jadi saya menulis ulang kode yang sama dalam javascript tetapi saya masih mendapatkan kesalahan yang sama!

Kode javascript :

const logo= document.querySelectorAll("#logo");
for (let i=0; i < logo.length; i++)
{
    console.log(i," ==== ",logo[i].getTotalLength());
}

Catatan: dalam kode html ini hanya ada 1 <path> , saya menghapus yang lain karena sangat besar!

Kode html:

<!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>

Ketika saya menghapus id="logo" dari tag <svg> dan menambahkannya ke <path> itu berfungsi dengan baik!

Jadi loop tidak bekerja dengan benar!

0
Dhia Djobbi 23 April 2020, 08:28

1 menjawab

Jawaban Terbaik

Jika Anda ingin mengulang semua elemen dengan nama tag tertentu, maka ada fungsi yang akan mendapatkan semuanya: getElementsByTagName.

Anda mendapatkan elemen induk <svg> dan hanya ada satu elemen tersebut. Anda dapat mengulangi melalui anak-anaknya dan menemukan elemen jalur tetapi mengapa repot mengingat ada cara yang lebih mudah untuk melakukannya.

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>
2
Robert Longson 23 April 2020, 06:00