Inkscape で円を作成し、塗りつぶしをオフにしてストロークのみが表示されるようにし、開始点を 45 度、終了点を 315 度に設定しました。
次にそれを 90 度回転させ、これが最終結果です。
リーリーそのレンダリング効果は次のとおりです:
リーリー
コピーをオーバーレイして、左下隅から始まるストロークの長さを制御できるようにしたいと考えています。たとえば、オーバーレイの全長の 22% のみを表示しますか、それとも 315 度の端点から 255.60 度までの線分を表示しますか?
この問題はどのように解決しますか (inkscape の開始および終了コントロールをプログラム的に効率的に実行します)。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
おそらく最も簡単な方法は、
リーリーpathLength属性を使用することです像：rinkle-dashharrayの最初の値を「パーセンテージ」を表すように変更します (上記の例の10は全長の 10% になります)。負のrinkle-dashoffsetのおかげで、パスに沿ったセグメントの移動が可能になります。このアプローチの興味深い点は、任意のコンパクトなパスを「トレース」するために使用できることです。次のコード スニペットは、入力としてパーセンテージを受け取り、<path> 要素内の楕円弧曲線コマンド
のパラメータを計算します。 100% は円弧の 4 分の 3 に相当します。