SVGのPathLength属性は何ですか？その実用的なアプリケーションは何ですか？

SVGのpathLengthプロパティ：パス長の柔軟な制御

SVGのpathLengthプロパティは簡単に思えますが、特にアニメーションとパスポイント位置の正確な制御において、強力な機能を実現できます。この記事では、 pathLength属性の使用方法と使用方法について詳しく説明します。

pathLength属性の関数

pathLengthプロパティを使用すると、SVGパスをカスタマイズできます（<path></path> ） 長さ。この長さは、通常、パスの実際の長さに比例する任意の値にすることができます。このプロパティを設定することにより、パス上のポイントの座標をより正確に制御し、複雑なアニメーションと描画効果を実現できます。

pathLength属性の使用方法

SVGパス要素があるとします。

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

このコードは、パスの長さを10ユニットに設定します。パスの実際の幾何学的長さであっても、 pathLength指定された値に正規化します。

実用的なアプリケーションケース

次の例は、 pathLengthパス上のポイントを制御する方法を示しています。

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

ここでは、パスの長さは100に設定されます。赤い円は出発点を示し、青い円はパスの50％にあります。 pathLength変更することにより、パス上の任意のポイントの座標を正確に調整できます。

高度なアプリケーション：アニメーション

pathLength 、アニメーションで重要な役割を果たします。たとえば、パスに沿って移動するアニメーションを作成できます。

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

この例では、赤い円がパスに沿って移動し、アニメーション期間は5秒で、再生がループされます。 pathLength 、アニメーションの速度と位置の正確な制御を保証します。

概要： pathLength属性により、SVGパスは非常に高い柔軟性を与え、アニメーションと正確な描画の幅広いアプリケーションの見通しを提供します。この属性を理解して適用すると、SVGグラフィックスの表現力を大幅に改善できます。

以上がSVGのPathLength属性は何ですか？その実用的なアプリケーションは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。