検索

ホームページ  >  に質問  >  本文

SVG 円のストローク長をプログラムで変更する

Inkscape で円を作成し、塗りつぶしをオフにしてストロークのみが表示されるようにし、開始点を 45 度、終了点を 315 度に設定しました。

次にそれを 90 度回転させ、これが最終結果です。

リーリー

そのレンダリング効果は次のとおりです:

リーリー

コピーをオーバーレイして、左下隅から始まるストロークの長さを制御できるようにしたいと考えています。たとえば、オーバーレイの全長の 22% のみを表示しますか、それとも 315 度の端点から 255.60 度までの線分を表示しますか?

この問題はどのように解決しますか (inkscape の開始および終了コントロールをプログラム的に効率的に実行します)。

P粉788571316P粉788571316284日前374

全員に返信(2)返信します

  • P粉036800074

    P粉0368000742024-03-29 15:46:23

    おそらく最も簡単な方法は、pathLength 属性を使用することです リーリー

    rinkle-dashharray の最初の値を「パーセンテージ」を表すように変更します (上記の例の 10 は全長の 10% になります)。負の rinkle-dashoffset のおかげで、パスに沿ったセグメントの移動が可能になります。このアプローチの興味深い点は、任意のコンパクトなパスを「トレース」するために使用できることです。

    リーリー

    返事
    0
  • P粉310931198

    P粉3109311982024-03-29 10:54:22

    次のコード スニペットは、入力としてパーセンテージを受け取り、<path> 要素内の楕円弧曲線コマンド A のパラメータを計算します。 100% は円弧の 4 分の 3 に相当します。

    リーリー リーリー

    返事
    0
  • キャンセル返事