SVG <path>

SVG လမ်းကြောင်း - <path>

<path> အရာ သည် လမ်းကြောင်း အချက်အလက် အား အသုံးပြုကြသည်။

အောက်ပါ အမှုကြမ်း ကို လမ်းကြောင်း အချက်အလက် အားဖြင့် အသုံးပြုနိုင်သည်:

  • M = လမ်းကြောင်းမှ ပြောင်းရွှေ့(moveto)
  • L = လမ်းကြောင်း(lineto)
  • H = အခြေအားဖြင့် လမ်းကြောင်း(horizontal lineto)
  • V = အမြင့်အားဖြင့် လမ်းကြောင်း(vertical lineto)
  • C = ဘီဇာရီလ်ဆိုင်း(curveto)
  • S = အက်ဒရက်စီ ဘီဇာရီလ်ဆိုင်း(smooth curveto)
  • Q = အက်ဒရက်စီ ဘီဇာရီလ်ဆိုင်း(quadratic Bézier curve)
  • T = အက်ဒရက်စီ ဘီဇာရီလ်ဆိုင်း(smooth quadratic Bézier curveto)
  • A = အယင်းပြားအတွင်း လမ်းကြောင်း(elliptical Arc)
  • Z = လမ်းကြောင်း ပိတ်(closepath)

ဖော်ပြချက်: အရာပေါင်း အားလုံး သည် သေးစိတ်အားဖြင့် ပြောင်းလဲနိုင်သည်။ အမိုးအားဖြင့် အခွန်းဖြည့်မှု အပြင်းအထန် ပြောင်းလဲနိုင်သည်၊ သေးစိတ်အားဖြင့် အခွန်းဖြည့်မှု အနှစ်နှစ် ပြောင်းလဲနိုင်သည်။

အမှတ် ၁

အောက်ပါ အမှတ် ၅ သည် စတင်ရာ ၁၅၀,၀ မှ ၇၅,၂၀၀ နေရာသို့ လမ်းကြောင်း တစ်လျှောက် ရှိပြီး ၂၂၅,၂၀၀ နေရာသို့ လမ်းကြောင်း တစ်လျှောက် ရှိပြီး နောက် ၁၅၀,၀ နေရာသို့ လမ်းကြောင်း ပိတ်ကြသည်။

这是 SVG 代码：

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />

亲自试一试

အမှတ် ၂

ဘီဇာရီလ်ဆိုင်း(Bézier curves) ကို အင်တာနက် အကျယ်အဝန်း အသေးစိတ်တူသော အရုပ်အချာ တည်ဆောက်ရန် အသုံးပြုကြသည်။ ပုံမှာ အသုံးပြုသူ သည် နောက်ပိုင်းနေရာ ၂ ခု နှင့် ကွင်းနေရာ ၁ ခု သို့မဟုတ် ၂ ခု အား ရွေးချယ်ကြသည်။ ကွင်းနေရာ ၁ ခု ရှိသော ဘီဇာရီလ်ဆိုင်း ကို အက်ဒရက်စီ ဘီဇာရီလ်ဆိုင်း(quadratic Bézier curve) ဟု ခေါ်ကြသည်၊ ကွင်းနေရာ ၂ ခု ရှိသော ဘီဇာရီလ်ဆိုင်း ကို အက်ဒရက်စီ ဘီဇာရီလ်ဆိုင်း(cubic) ဟု ခေါ်ကြသည်။

အောက်ပါအချက်အလက်မှာ အရောင်ရှည်ကြားသောပြောင်းလဲမှုကို ဖန်တီးပြီး အေ နှင့် စတီ ဖြစ်ပါသည် စတင် နှင့် အဆုံး ဖြစ်ပါသည် နှင့် ဘီ ဖြစ်ပါသည် ဖြစ်သည်

A B C

这是 SVG 代码：

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>

亲自试一试

很复杂吧？是的！！！由于绘制路径非常复杂，强烈建议使用 SVG 编辑器来创建复杂图形。