Как я могу l oop через элементы пути в SVG? - PullRequest
Новая
       3

Как я могу l oop через элементы пути в SVG?

0 голосов
/ 23 апреля 2020

Я получаю TypeError: logo[i].getTotalLength is not a function ошибку при попытке измерить длину каждого <path> тега <svg>!

Я получил эту ошибку, используя jquery: 

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

Поэтому я переписал тот же код в javascript, но все равно получаю ту же ошибку!

javascript код: 

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

Примечание: в этом html коде есть только 1 <path>, я удалил остальные, потому что они очень большие!

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>

Когда я удалили id="logo" из тега <svg> и добавьте его к <path>, он отлично работает!

Так что l oop не работает должным образом!

1 Ответ

2 голосов
/ 23 апреля 2020

Если вы хотите l oop через все элементы с определенным именем тега, есть функция, которая получит все из них: getElementsByTagName.

Вы получили родительский элемент <svg>, и есть только один из них. Вы можете перебирать его дочерние элементы и находить элементы пути, но зачем беспокоиться, если есть более простой способ сделать это. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...