Атрибут SVG pathLength

Опубликовано: 25 Февраля, 2022

Атрибут pathLength определяет общую длину пути в пользовательских единицах. Этот атрибут использует следующие элементы: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> и <rect>.

Синтаксис:

 pathLength = число

Значения атрибутов: атрибут pathLength принимает значения, упомянутые выше и описанные ниже.

число: это либо число с дробной частью, либо целое число.

Примеры ниже иллюстрируют использование атрибута pathLength.

Exmaple 1:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        path {
            stroke: green;
            stroke-width: 5;
            stroke-dasharray: 12;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
  
    <svg viewBox=" 0 0 400 60" 
        xmlns="http://www.w3.org/2000/svg">
  
        <path d="M 0,10 h100" />
  
        <path d="M 0,20 h100" pathLength="80" />
    </svg>
</body>
  
</html>

Выход:

Example 2:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        path {
            stroke: green;
            stroke-width: 5;
            stroke-dasharray: 12;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
    <svg viewBox="0 20 400 60" 
        xmlns="http://www.w3.org/2000/svg">
        <path d="M 0,30 h100" pathLength="60" />
        <path d="M 0,40 h100" pathLength="30" />
        <path d="M 0,50 h100" pathLength="10" />
    </svg>
</body>
  
</html>

Выход:

HTML

Атрибут SVG pathLength

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ