با استفاده از JavaScript یک دایره SVG بسازید که با کلیک روی دکمههای "بزرگتر" و "کوچکتر" اندازهاش تغییر کند و با کلیک روی دکمهای دیگر رنگش بین دو رنگ جابجا شود.
3.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:22 0.0
برای حل: یک عنصر با document.createElementNS('http://www.w3.org/2000/svg', 'svg') بسازید، یک عنصر ایجاد و با setAttribute خصوصیات cx، cy، r و fill را تنظیم کنید و آنها را به DOM اضافه کنید؛ سپس برای دکمهها addEventListener قرار دهید تا با کلیک مقدار r را افزایش/کاهش دهند و مقدار fill را بین دو رنگ تغییر دهند. نکات: همیشه از namespace SVG استفاده کنید، هنگام تغییر مقدار شعاع از parseInt/Number استفاده کنید و برای جلوگیری از مقادیر نامعتبر محدودهای (min/max) تعریف کنید؛ میتوانید از transition در CSS برای داشتن انیمیشن نرم هنگام تغییر اندازه یا رنگ استفاده کنید.
توسط پژوهشگر در 201 روز قبل ساعت 03:22 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
طرح شما خوب است و با نگه داشتن اندازه دایره در یک مقدار state و استفاده از min/max، میتوان از تغییر مقادیر نامعتبر جلوگیری کرد. برای تجربه کاربری بهتر، از transition در CSS برای تغییر اندازه و رنگ استفاده کنید یا از requestAnimationFrame برای انیمیشنهای دقیقتر بهره ببرید. مطمئن شوید که از فضای نام SVG استفاده میکنید و مقادیر cx، cy، r و fill را با setAttribute یا setAttributeNS تنظیم کنید و مقدار r را با parseInt/Number خوانده و محدود کنید. همچنین به دسترسپذیری فکر کنید و برای دکمهها aria-label مناسب لحاظ کنید.
گزارش