ایس وی جی <ریگت>

SVG شکل

SVG کچھ پیش تعریف شدہ شکل عناصر فراہم کرتا ہے جو ڈیولپر استعمال کرسکتے ہیں:

• مربع
• چکر <circle>
• مستطیل چکر <ellipse>
• خط مستقیم <line>
• کمینا <polyline>
• چوکیدار <polygon>
• روی <path>

آئندہ فصل میں rect عنصر سے شروع ہوکر ہر عنصر کی تعلیم دی جائیگی。

SVG مربع - <rect>

مثال 1

元素用于创建矩形以及矩形形状的变体：

ਇਹ SVG ਕੋਡ ਹੈ:

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

کد توجیہ:

• 元素的 width 和 height 属性定义矩形的高度和宽度
• style 属性用于定义矩形的 CSS 属性
• CSS fill 属性定义矩形的填充颜色
• CSS border-width 属性定义矩形的边框宽度
• CSS stroke 属性定义矩形的边框颜色

例子 2

让我们看另一个包含新属性的例子：

ਇਹ SVG ਕੋਡ ਹੈ:

<svg width="400" height="180">
  
</svg>

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

کد توجیہ:

• x 属性定义矩形的左侧位置（例如 x="50" 将矩形放置在距左外边距 50 px 的位置）
• y 属性定义矩形的顶部位置（例如 y="20" 将矩形放置在距上外边距 20 px 的位置）
• CSS fill-opacity 属性定义填充颜色的不透明度（合法范围：0 到 1）
• CSS border-opacity 属性定义笔触颜色的不透明度（合法范围：0 到 1）

例子 3

定义整个元素的不透明度：

ਇਹ SVG ਕੋਡ ਹੈ:

<svg width="400" height="180">
  
</svg>

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

کد توجیہ:

• CSS opacity 属性定义整个元素的不透明度值（合法范围：0 到 1）

ਉਦਾਹਰਣ 4

ਆਖਰੀ ਉਦਾਹਰਣ, ਚੱਕਰ ਹੱਦ ਵਾਲੇ ਚੌਕੇ ਬਣਾਓ:

ਇਹ SVG ਕੋਡ ਹੈ:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

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

کد توجیہ:

• rx اور ry کی اقدار نے مربع کے کونوں کو چورا کردیا