ایس وی جی <پاتھ>

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 (بند کردینا)

توجہ: آپریشن کی تمام کمانڈ بچولی کی شکل میں بھی استعمال کی جاسکتی ہیں۔ بچولی کی شکل میں استعمال کیا جانا آپریشن کا مضبوطی کا مطلب ہوتا ہے، جبکہ بچولی کی بچولی کی شکل میں استعمال کیا جانا آپریشن کی تناسق کا مطلب ہوتا ہے۔

مثال 1

ایک مثال میں ایک راستہ کا تعریف کیا گیا ہے، جس کا شروع 150,0 سے ہوتا ہے، تو اس سے 75,200 کا راستہ، تو اس سے 225,200 کا راستہ، تو اس سے 150,0 تک کا راستہ بگاڑا جاتا ہے، تو اس سے راستہ بند کردیا گیا ہے۔

这是 SVG 代码：

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

پرسنل طور پر کریں

مثال 2

بیلزیر کوروز (Bézier curves) بہت سارا تیار کرنے والا سمجھوتا ہے جو بہت چھوٹی اور بہت چھوٹی بھی بغیر کسی بچاؤ کی ضرورت سے بغیر بگاڑ سکتا ہے۔ عام طور پر، استعمال کنندگان دو آخری پوائنٹ اور ایک یا دو کنٹرول پوائنٹ منتخب کرتے ہیں۔ ایک کنٹرول پوائنٹ والا بیلزیر کوروز دو درجہ بیلزیر کوروز کہلاتا ہے، دو کنٹرول پوائنٹ والا بیلزیر کوروز تین درجہ بیلزیر کوروز کہلاتا ہے۔

ਇਸ ਵਿੱਚ ਇੱਕ ਦੂਜੀ ਬੇਸੀਲ ਕਰਵ ਬਣਾਇਆ ਗਿਆ ਹੈ ਜਿਸ ਵਿੱਚ A ਅਤੇ C ਸ਼ੁਰੂਆਤ ਅਤੇ ਮੰਡਾ ਹਨ ਅਤੇ B ਨਿਯੰਤਰਣ ਪੁਆਇੰਟ ਹੈ:

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

پرسنل طور پر کریں

خود کا تجربہ کریں