ایس وی جی <ایلز>

SVG ਇਲੌਕਸ - <ellipse>

<ellipse> ਇਲੌਕਸ ਬਣਾਉਣ ਲਈ ਇਲੈਮੈਂਟ ਵਰਤਾਉਂਦਾ ਹੈ。

ਇਲੌਕਸ ਗੋਲ ਨਾਲ ਬਹੁਤ ਨਜ਼ਦੀਕੀ ਹੈ। ਅੰਤਰ ਇਹ ਹੈ ਕਿ ਇਲੌਕਸ ਦੇ x ਅਤੇ y ਵਰਤਾਰੇ ਵਿਚਕਾਰ ਅੰਤਰ ਹੁੰਦਾ ਹੈ ਜਦਕਿ ਗੋਲ ਦੇ x ਅਤੇ y ਵਰਤਾਰੇ ਸਮਾਨ ਹੁੰਦੇ ਹਨ:

ਉਦਾਹਰਣ 1

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਇਲੌਕਸ ਬਣਾਉਂਦਾ ਹੈ:

ਇਹ SVG ਕੋਡ ਹੈ:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

خود کا تجربہ کریئن

ਕੋਡ ਵਿਆਖਿਆ:

• cx ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਾਰਾ ਵਰਤਾਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਇਲੌਕਸ ਦੇ ਸੈਂਟਰ ਦੀ x ਸਕੋਰ
• cy ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਾਰਾ ਵਰਤਾਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਇਲੌਕਸ ਦੇ ਸੈਂਟਰ ਦੀ y ਸਕੋਰ
• rx ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਾਰਾ ਵਰਤਾਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
• ry ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਾਰਾ ਵਰਤਾਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ

ਉਦਾਹਰਣ 2

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਤਿੰਨ ਇੱਕ ਦੂਜੇ ਉੱਪਰ ਲੱਗੇ ਅੰਗੂਠੇ ਬਣਾਉਂਦਾ ਹੈ:

ਇਹ SVG ਕੋਡ ਹੈ:

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

خود کا تجربہ کریئن

ਉਦਾਹਰਣ 3

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਦੋ ਅੰਗੂਠੇ (ਇੱਕ ਹੰਨੇ ਅਤੇ ਇੱਕ ਸਫੇਦ) ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ:

ਇਹ SVG ਕੋਡ ਹੈ:

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

خود کا تجربہ کریئن