13-05-2021، 11:39
تگ svg تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره و … که همگی میتوانند درون تگ svg نگهداری شوند.
کلمه SVG مخفف Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) می باشد که در HTML5 این تگ یک تگ جدید/اضافه شده است
مثال شماره ۱ : رسم دایره بهمراه خط دور لبه
مثال شماره ۲ : رسم مربع با خط دور لبه و گوشه های گرد شده
مثال شماره ۳ : رسم دایره با محتوا (یک متن در داخل دایره)
کلمه SVG مخفف Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) می باشد که در HTML5 این تگ یک تگ جدید/اضافه شده است
مثال شماره ۱ : رسم دایره بهمراه خط دور لبه
کد:
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
</svg>
</body>
مثال شماره ۲ : رسم مربع با خط دور لبه و گوشه های گرد شده
کد:
<body>
<svg width="120" height="120">
<rect x="5" y="5" rx="10" ry="5" width="100" height="100" style="fill:#00b185;stroke:#000;stroke-width:3;" />
</svg>
</body>
مثال شماره ۳ : رسم دایره با محتوا (یک متن در داخل دایره)
کد:
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
<text fill="#ffffff" font-size="13" font-family="tahoma" x="18" y="56">Free-Learn</text>
</svg>
</body>