+- انجمن های تخصصی فلش خور (http://www.flashkhor.com/forum)
+-- انجمن: رایانه (http://www.flashkhor.com/forum/forumdisplay.php?fid=27)
+--- انجمن: آموزش رایانه و اینترنت (http://www.flashkhor.com/forum/forumdisplay.php?fid=60)
+--- موضوع: آموزش تگ svg در HTML (/showthread.php?tid=296934)
آموزش تگ svg در HTML - Mohlek - 13-05-2021
تگ svg تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره و … که همگی میتوانند درون تگ svg نگهداری شوند.
کلمه 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>