ایچ تی ایم ایل میں ایس وی جی

ਤੁਸੀਂ SVG ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਸਿੱਧੇ HTML ਪੰਨੇ ਵਿੱਚ ਵਧਾ ਸਕਦੇ ਹੋ

SVG ਨੂੰ ਸਿੱਧੇ HTML ਪੰਨੇ ਵਿੱਚ ਵਧਾਓ

ਇੱਕ ਸਰਲ SVG ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਇੱਕ ਉਦਾਹਰਣ:

ਬਗੈਰ ਇਸ ਤੋਂ, ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ ਇਨਲਾਈਨ SVG ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ

ਇਹ HTML ਕੋਡ ਹੈ:

<!DOCTYPE html>
<html>
<body>
<h1>ਮੇਰਾ ਪਹਿਲਾ SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

ਖੁਦ ਸਿਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

SVG ਕੋਡ ਵਿਸ਼ਲੇਸ਼ਣ:

  • SVG ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ <svg> ਪ੍ਰਤੀਯੋਗੀ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ
  • <svg> ਪ੍ਰਤੀਯੋਗੀ ਦੇ width ਅਤੇ height ਪ੍ਰਤੀਯੋਗੀ ਐਗਜ਼ੀਬਲ ਗੋਲ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਨ
  • <circle> ਪ੍ਰਤੀਯੋਗੀ ਗੋਲ ਦਾ ਚਿੱਤਰਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ
  • cx ਅਤੇ cy ਪ੍ਰਤੀਯੋਗੀ ਗੋਲ ਦੇ ਕੇਂਦਰ ਦੇ x ਅਤੇ y ਨਿਰਧਾਰਕ ਕਰਦੇ ਹਨ। ਜੇਕਰ cx ਅਤੇ cy ਨਾ ਸੈਟ ਕੀਤੇ ਗਏ ਤਾਂ ਗੋਲ ਦਾ ਕੇਂਦਰ (0, 0) ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ
  • r ਪ੍ਰਤੀਯੋਗੀ ਗੋਲ ਦੇ ਵਾਧੂ ਦਾ ਨਿਰਧਾਰਣ ਕਰਦਾ ਹੈ
  • stroke ਅਤੇ stroke-width ਪ੍ਰਤੀਯੋਗੀ ਹਾਲਚਕਰ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦੇ ਹਨ। ਅਸੀਂ ਗੋਲ ਦੇ ਹਾਲਚਕਰ ਨੂੰ 4 ਪਿਕਸਲ ਦੇ ਹਰੀ 'ਬੋਰਡਰ' ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਾਂ
  • fill ਪ੍ਰਤੀਯੋਗੀ ਗੋਲ ਦੇ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਪੂਰਕ ਰੰਗ ਨੂੰ ਸੰਗੂਹੀ ਸੈਟ ਕਰਦੇ ਹਾਂ
  • </svg> لگن بند ایس وی جی تصویر

توجیہ: جس لیے ایس وی جی ایکس ایم ایل کے ذریعے لکھا گیا ہے، لہذا تمام عناصر کو صحیح طور پر بند کرنا چاہئے!