Apakah atribut Pathlength dalam SVG? Apakah aplikasi praktikalnya?

SVG's pathLength Property: Kawalan Fleksibel Panjang Laluan

Walaupun sifat pathLength di SVG nampaknya mudah, ia dapat mencapai fungsi yang kuat, terutama dalam animasi dan kawalan tepat kedudukan titik jalan. Artikel ini akan meneroka kaedah penggunaan dan penggunaan yang mendalam bagi atribut pathLength .

Fungsi atribut pathLength

Harta pathLength membolehkan anda menyesuaikan laluan SVG (<path></path> ) panjang. Panjang ini boleh menjadi nilai, biasanya berkadar dengan panjang sebenar jalan. Dengan menetapkan harta ini, anda boleh mengawal koordinat mata di jalan dengan lebih tepat, dengan itu mencapai animasi dan kesan lukisan yang kompleks.

Cara Menggunakan Atribut pathLength

Katakan anda mempunyai elemen laluan SVG:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="10" stroke="black"></path>
</svg>

Kod ini menetapkan panjang laluan ke 10 unit. Tidak kira apa panjang geometri sebenar laluannya, pathLength menormalkannya kepada nilai yang ditentukan.

Kes aplikasi praktikal

Contoh berikut menunjukkan bagaimana pathLength mengawal titik di jalan:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" pathlength="100" stroke="black"></path>
  <circle cx="10" cy="10" fill="red" r="2"></circle> 
  <circle cx="50" cy="50" fill="blue" r="2"></circle> 
</svg>

Di sini, panjang laluan ditetapkan kepada 100. Lingkaran merah menunjukkan titik permulaan, manakala bulatan biru terletak pada 50% dari laluan. Dengan mengubahsuai pathLength , anda boleh menyesuaikan dengan tepat koordinat mana -mana titik di jalan.

Aplikasi Lanjutan: Animasi

pathLength memainkan peranan penting dalam animasi. Sebagai contoh, anda boleh membuat animasi yang bergerak di sepanjang jalan:

<svg height="100" width="100">
  <path d="M10 10 L90 90" fill="none" id="myPath" pathlength="100" stroke="black"></path>
  <circle fill="red" r="2">
    <animatemotion dur="5s" repeatcount="indefinite">
      <mpath xlink:href="https://www.php.cn/link/f9915a71fed113978ef38aca492f4753"></mpath>
    </animatemotion>
  </circle>
</svg>

Dalam contoh ini, bulatan merah akan bergerak di sepanjang jalan, tempoh animasi adalah 5 saat, dan main balik akan dilingkari. pathLength memastikan kawalan tepat kelajuan dan kedudukan animasi.

Ringkasan: Atribut pathLength memberikan laluan SVG yang sangat tinggi, memberikan mereka prospek aplikasi yang luas dalam animasi dan lukisan yang tepat. Memahami dan menggunakan atribut ini dapat meningkatkan ekspresi grafik SVG dengan ketara.

Atas ialah kandungan terperinci Apakah atribut Pathlength dalam SVG? Apakah aplikasi praktikalnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!