SVG এর সাথে CSS এবং JavaScript ইন্টিগ্রেশন

HTML5 এর SVG (Scalable Vector Graphics) - এইচটিএমএল (HTML5) - Web Development

381

SVG (Scalable Vector Graphics) হলো একটি শক্তিশালী XML-ভিত্তিক ফরম্যাট যা ওয়েব পেজে ভেক্টর গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। CSS (Cascading Style Sheets) এবং JavaScript এর সাথে SVG ইন্টিগ্রেশন করলে আপনি SVG গ্রাফিক্সকে আরও স্টাইলিশ, ইন্টারেক্টিভ এবং অ্যানিমেটেড করতে পারেন। এই অংশে আমরা দেখব কিভাবে CSS এবং JavaScript ব্যবহার করে SVG গ্রাফিক্সকে কাস্টমাইজ এবং ইন্টারঅ্যাক্টিভ করা যায়।

১. CSS এর সাথে SVG স্টাইলিং

SVG গ্রাফিক্সকে CSS এর মাধ্যমে স্টাইল করা যায়, যা SVG এলিমেন্টগুলোর রঙ, সাইজ, ফন্ট, এবং অন্যান্য স্টাইল প্রপার্টি নিয়ন্ত্রণ করতে সাহায্য করে। CSS এর মাধ্যমে আপনি SVG এর বিভিন্ন অংশকে সহজে স্টাইল করতে পারেন, যেমন বৃত্ত, রেখা, আয়তক্ষেত্র ইত্যাদি।

১.১. ইনলাইন CSS স্টাইলিং

SVG এলিমেন্টের ভিতরে সরাসরি স্টাইল অ্যাট্রিবিউট ব্যবহার করে স্টাইল করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>SVG ইনলাইন CSS স্টাইলিং উদাহরণ</title>
</head>
<body>
    <h2>SVG ইনলাইন CSS স্টাইলিং</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="150" cy="200" r="50" fill="red" stroke="black" stroke-width="3" />
        <rect x="250" y="150" width="100" height="100" fill="green" stroke="blue" stroke-width="2" />
    </svg>
</body>
</html>

ব্যাখ্যা:

fill: এলিমেন্টের ভরাট রঙ নির্ধারণ করে।
stroke: এলিমেন্টের আউটলাইন রঙ নির্ধারণ করে।
stroke-width: আউটলাইন পুরুত্ব নির্ধারণ করে।

১.২. এম্বেডেড CSS স্টাইলিং

SVG এর মধ্যে <style> ট্যাগ ব্যবহার করে CSS স্টাইল শিট এম্বেড করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>SVG এম্বেডেড CSS স্টাইলিং উদাহরণ</title>
    <style>
        .blue-stroke {
            stroke: blue;
            stroke-width: 2;
        }
        .green-fill {
            fill: green;
        }
        .red-fill {
            fill: red;
        }
    </style>
</head>
<body>
    <h2>SVG এম্বেডেড CSS স্টাইলিং</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="150" cy="200" r="50" class="red-fill blue-stroke" />
        <rect x="250" y="150" width="100" height="100" class="green-fill blue-stroke" />
    </svg>
</body>
</html>

ব্যাখ্যা:

.blue-stroke, .green-fill, .red-fill: CSS ক্লাস যা বিভিন্ন স্টাইল প্রপার্টি অ্যাপ্লাই করে।
class: SVG এলিমেন্টে CSS ক্লাস অ্যাপ্লাই করে স্টাইলিং প্রয়োগ করা হয়।

১.৩. এক্সটার্নাল CSS স্টাইলিং

বাহ্যিক CSS ফাইল ব্যবহার করে SVG স্টাইল করা যায়, যা বড় প্রকল্পে কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়।

styles.css

.blue-stroke {
    stroke: blue;
    stroke-width: 2;
}
.green-fill {
    fill: green;
}
.red-fill {
    fill: red;
}

index.html

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>SVG এক্সটার্নাল CSS স্টাইলিং উদাহরণ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>SVG এক্সটার্নাল CSS স্টাইলিং</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="150" cy="200" r="50" class="red-fill blue-stroke" />
        <rect x="250" y="150" width="100" height="100" class="green-fill blue-stroke" />
    </svg>
</body>
</html>

ব্যাখ্যা:

<link rel="stylesheet" href="styles.css">: বাহ্যিক CSS ফাইল লিঙ্ক করে।
SVG এলিমেন্টে CSS ক্লাস ব্যবহার করে স্টাইল প্রয়োগ করা হয়।

১.৪. CSS সিলেক্টর ব্যবহার করে স্টাইলিং

CSS সিলেক্টর ব্যবহার করে নির্দিষ্ট SVG এলিমেন্টগুলোকে টার্গেট করে স্টাইল করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>SVG সিলেক্টর স্টাইলিং উদাহরণ</title>
    <style>
        svg circle {
            fill: purple;
            stroke: orange;
            stroke-width: 4;
        }
        svg rect {
            fill: teal;
            stroke: navy;
            stroke-width: 3;
        }
    </style>
</head>
<body>
    <h2>SVG সিলেক্টর স্টাইলিং</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cx="150" cy="200" r="50" />
        <rect x="250" y="150" width="100" height="100" />
    </svg>
</body>
</html>

ব্যাখ্যা:

svg circle: সকল SVG এর মধ্যে থাকা <circle> এলিমেন্টগুলোকে টার্গেট করে।
svg rect: সকল SVG এর মধ্যে থাকা <rect> এলিমেন্টগুলোকে টার্গেট করে।

১.৫. CSS অ্যানিমেশন ব্যবহার করে SVG অ্যানিমেট করা

CSS অ্যানিমেশন ব্যবহার করে SVG এলিমেন্টগুলোকে অ্যানিমেট করা যায়, যা গ্রাফিক্সকে আরও জীবন্ত করে তোলে।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>SVG CSS অ্যানিমেশন উদাহরণ</title>
    <style>
        .animated-circle {
            fill: red;
            stroke: black;
            stroke-width: 2;
            animation: move 4s infinite alternate;
        }

        @keyframes move {
            from { cx: 100; }
            to { cx: 400; }
        }
    </style>
</head>
<body>
    <h2>CSS অ্যানিমেশন দিয়ে SVG বৃত্ত মুভমেন্ট</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle cy="200" r="30" class="animated-circle" />
    </svg>
</body>
</html>

ব্যাখ্যা:

.animated-circle ক্লাস: বৃত্তের স্টাইল এবং অ্যানিমেশন নির্ধারণ করে।
@keyframes move: অ্যানিমেশনের ধাপ নির্ধারণ করে, যেখানে বৃত্তটি বাম থেকে ডানে সরবে।
animation: move 4s infinite alternate;: অ্যানিমেশন নাম, সময়কাল, পুনরাবৃত্তি সংখ্যা, এবং অ্যালটারনেট মোড নির্ধারণ করে।

২. JavaScript এর সাথে SVG ইন্টিগ্রেশন

JavaScript ব্যবহার করে SVG গ্রাফিক্সে ইন্টারেক্টিভিটি এবং ডাইনামিক পরিবর্তন যোগ করা যায়। SVG এলিমেন্টগুলো DOM এর অংশ হওয়ায়, আপনি JavaScript এর মাধ্যমে সহজে তাদের অ্যাক্সেস এবং পরিবর্তন করতে পারেন।

২.১. SVG এলিমেন্টের DOM অ্যাক্সেস করা

JavaScript ব্যবহার করে SVG এলিমেন্টগুলোকে DOM থেকে অ্যাক্সেস করা যায় এবং তাদের অ্যাট্রিবিউটস পরিবর্তন করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript দিয়ে SVG পরিবর্তন উদাহরণ</title>
</head>
<body>
    <h2>JavaScript দিয়ে SVG রঙ পরিবর্তন</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="myCircle" cx="250" cy="200" r="50" fill="green" stroke="black" stroke-width="2" />
    </svg>

    <button onclick="changeColor()">রঙ পরিবর্তন করুন</button>

    <script>
        function changeColor() {
            const circle = document.getElementById('myCircle');
            const currentColor = circle.getAttribute('fill');
            const newColor = currentColor === 'green' ? 'orange' : 'green';
            circle.setAttribute('fill', newColor);
        }
    </script>
</body>
</html>

ব্যাখ্যা:

getElementById: SVG এলিমেন্টকে DOM থেকে পেতে ব্যবহৃত হয়।
getAttribute এবং setAttribute: এলিমেন্টের অ্যাট্রিবিউটস পড়া এবং পরিবর্তন করা হয়।
changeColor ফাংশন: বৃত্তের রঙ পরিবর্তন করে।

২.২. SVG এর সাথে ইভেন্ট হ্যান্ডলিং

JavaScript ব্যবহার করে SVG এলিমেন্টগুলোর সাথে ইভেন্ট হ্যান্ডলিং করা যায়, যেমন ক্লিক, হোভার, মাউস মুভ ইত্যাদি।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript ইভেন্ট হ্যান্ডলিং সহ SVG উদাহরণ</title>
    <style>
        .interactive-circle {
            transition: fill 0.3s;
        }
        .interactive-circle:hover {
            fill: purple;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>JavaScript ইভেন্ট হ্যান্ডলিং সহ SVG বৃত্ত</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="interactiveCircle" cx="250" cy="200" r="50" fill="teal" class="interactive-circle" />
    </svg>

    <script>
        const circle = document.getElementById('interactiveCircle');

        // ক্লিক ইভেন্ট হ্যান্ডলার
        circle.addEventListener('click', function() {
            const currentColor = circle.getAttribute('fill');
            const newColor = currentColor === 'teal' ? 'orange' : 'teal';
            circle.setAttribute('fill', newColor);
        });

        // মাউস মুভ ইভেন্ট হ্যান্ডলার
        circle.addEventListener('mousemove', function(event) {
            const svg = circle.ownerSVGElement;
            const rect = svg.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;
            circle.setAttribute('cx', mouseX);
            circle.setAttribute('cy', mouseY);
        });
    </script>
</body>
</html>

ব্যাখ্যা:

.interactive-circle ক্লাস: CSS হোভার ইফেক্ট এবং ট্রানজিশন নির্ধারণ করে।
addEventListener('click'): বৃত্তে ক্লিক করলে রঙ পরিবর্তন করে।
addEventListener('mousemove'): মাউস মুভ করলে বৃত্তের অবস্থান পরিবর্তন করে।

২.৩. SVG এর সাথে অ্যানিমেশন (JavaScript ব্যবহার করে)

JavaScript ব্যবহার করে SVG এলিমেন্টগুলোর সাথে আরও জটিল অ্যানিমেশন তৈরি করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript অ্যানিমেশন সহ SVG উদাহরণ</title>
</head>
<body>
    <h2>JavaScript অ্যানিমেশন দিয়ে SVG বৃত্ত মুভমেন্ট</h2>
    <svg id="mySvg" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="animCircle" cx="50" cy="200" r="30" fill="blue" />
    </svg>

    <script>
        const circle = document.getElementById('animCircle');
        let posX = 50;
        let speed = 2;

        function animate() {
            posX += speed;
            if (posX > 450 || posX < 50) {
                speed = -speed;
            }
            circle.setAttribute('cx', posX);
            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>

ব্যাখ্যা:

requestAnimationFrame: ব্রাউজারের রিফ্রেশ রেট অনুযায়ী অ্যানিমেশন ফাংশন কল করে, যা মসৃণ অ্যানিমেশন নিশ্চিত করে।
animate ফাংশন: বৃত্তের cx অ্যাট্রিবিউট পরিবর্তন করে মুভমেন্ট তৈরি করে।

৩. CSS এবং JavaScript এর সাথে আরও উন্নত ইন্টিগ্রেশন

৩.১. CSS ট্রানজিশন এবং ট্রান্সফরমেশন

CSS ট্রানজিশন এবং ট্রান্সফরমেশন ব্যবহার করে SVG এলিমেন্টগুলোর স্টাইল পরিবর্তন মসৃণভাবে করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>CSS ট্রানজিশন ও ট্রান্সফরমেশন সহ SVG</title>
    <style>
        .transform-rect {
            fill: lightblue;
            stroke: navy;
            stroke-width: 2;
            transition: transform 0.5s, fill 0.5s;
        }
        .transform-rect:hover {
            fill: lightcoral;
            transform: rotate(45deg);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>CSS ট্রানজিশন ও ট্রান্সফরমেশন সহ SVG আয়তক্ষেত্র</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <rect x="200" y="150" width="100" height="100" class="transform-rect" />
    </svg>
</body>
</html>

ব্যাখ্যা:

.transform-rect ক্লাস: আয়তক্ষেত্রের স্টাইল এবং ট্রানজিশন নির্ধারণ করে।
:hover পছন্দ: হোভার করলে আয়তক্ষেত্রের রঙ পরিবর্তন হয় এবং এটি রোটেট করে।

৩.২. JavaScript দিয়ে ডাইনামিক স্টাইল পরিবর্তন

JavaScript ব্যবহার করে SVG এলিমেন্টগুলোর স্টাইল ডাইনামিকভাবে পরিবর্তন করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript দিয়ে SVG স্টাইল পরিবর্তন</title>
    <style>
        .styled-circle {
            transition: fill 0.3s, r 0.3s;
        }
    </style>
</head>
<body>
    <h2>JavaScript দিয়ে SVG বৃত্ত স্টাইল পরিবর্তন</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="styledCircle" cx="250" cy="200" r="40" fill="purple" class="styled-circle" />
    </svg>

    <button onclick="changeStyle()">স্টাইল পরিবর্তন করুন</button>

    <script>
        function changeStyle() {
            const circle = document.getElementById('styledCircle');
            const currentFill = circle.getAttribute('fill');
            const currentRadius = parseInt(circle.getAttribute('r'));

            // রঙ পরিবর্তন
            const newFill = currentFill === 'purple' ? 'pink' : 'purple';
            circle.setAttribute('fill', newFill);

            // রেডিয়াস পরিবর্তন
            const newRadius = currentRadius === 40 ? 60 : 40;
            circle.setAttribute('r', newRadius);
        }
    </script>
</body>
</html>

ব্যাখ্যা:

.styled-circle ক্লাস: বৃত্তের স্টাইল এবং ট্রানজিশন নির্ধারণ করে।
changeStyle ফাংশন: বৃত্তের রঙ এবং রেডিয়াস পরিবর্তন করে।
button: বাটনে ক্লিক করলে changeStyle ফাংশন কল হয়।

৩.৩. JavaScript দিয়ে SVG এ ড্র্যাগ অ্যান্ড ড্রপ ইন্টারঅ্যাকশন

JavaScript ব্যবহার করে SVG এলিমেন্টগুলিকে ড্র্যাগ অ্যান্ড ড্রপ ইন্টারঅ্যাকশন যোগ করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript দিয়ে SVG ড্র্যাগ অ্যান্ড ড্রপ</title>
    <style>
        .draggable {
            cursor: move;
        }
    </style>
</head>
<body>
    <h2>JavaScript দিয়ে SVG বৃত্ত ড্র্যাগ অ্যান্ড ড্রপ</h2>
    <svg id="dragSvg" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="dragCircle" cx="250" cy="200" r="50" fill="orange" class="draggable" />
    </svg>

    <script>
        const svg = document.getElementById('dragSvg');
        const circle = document.getElementById('dragCircle');
        let isDragging = false;
        let offsetX, offsetY;

        circle.addEventListener('mousedown', function(event) {
            isDragging = true;
            const rect = svg.getBoundingClientRect();
            offsetX = event.clientX - rect.left - parseInt(circle.getAttribute('cx'));
            offsetY = event.clientY - rect.top - parseInt(circle.getAttribute('cy'));
        });

        document.addEventListener('mousemove', function(event) {
            if (isDragging) {
                const rect = svg.getBoundingClientRect();
                let newX = event.clientX - rect.left - offsetX;
                let newY = event.clientY - rect.top - offsetY;

                // সীমানার মধ্যে সীমাবদ্ধ রাখা
                newX = Math.max(parseInt(circle.getAttribute('r')), Math.min(500 - parseInt(circle.getAttribute('r')), newX));
                newY = Math.max(parseInt(circle.getAttribute('r')), Math.min(400 - parseInt(circle.getAttribute('r')), newY));

                circle.setAttribute('cx', newX);
                circle.setAttribute('cy', newY);
            }
        });

        document.addEventListener('mouseup', function() {
            isDragging = false;
        });
    </script>
</body>
</html>

ব্যাখ্যা:

.draggable ক্লাস: বৃত্তের কার্সর পরিবর্তন করে ড্র্যাগ ইন্টারঅ্যাকশন ইঙ্গিত করে।
mousedown ইভেন্ট: ড্র্যাগ শুরু করার জন্য।
mousemove ইভেন্ট: বৃত্তের অবস্থান পরিবর্তন করে ড্র্যাগ করে।
mouseup ইভেন্ট: ড্র্যাগ বন্ধ করার জন্য।

৪. CSS এবং JavaScript এর সাথে SVG এর আরও উন্নত ইন্টিগ্রেশন

৪.১. CSS ট্রান্সিশন ব্যবহার করে SVG এলিমেন্ট পরিবর্তন

CSS ট্রান্সিশন ব্যবহার করে SVG এলিমেন্টগুলোর স্টাইল পরিবর্তনকে মসৃণ করে তোলা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>CSS ট্রান্সিশন সহ SVG</title>
    <style>
        .transition-rect {
            fill: lightblue;
            stroke: navy;
            stroke-width: 2;
            transition: fill 0.5s, transform 0.5s;
        }
        .transition-rect:hover {
            fill: coral;
            transform: scale(1.2);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>CSS ট্রান্সিশন সহ SVG আয়তক্ষেত্র</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <rect x="200" y="150" width="100" height="100" class="transition-rect" />
    </svg>
</body>
</html>

ব্যাখ্যা:

.transition-rect ক্লাস: আয়তক্ষেত্রের স্টাইল এবং ট্রান্সিশন নির্ধারণ করে।
:hover পছন্দ: হোভার করলে আয়তক্ষেত্রের রঙ পরিবর্তন হয় এবং এটি স্কেল হয়।
transition প্রপার্টি: স্টাইল পরিবর্তনের সময়কাল নির্ধারণ করে।

৪.২. JavaScript দিয়ে SVG এ ডাইনামিক ক্লাস অ্যাসাইন করা

JavaScript ব্যবহার করে SVG এলিমেন্টগুলোতে ক্লাস অ্যাসাইন করে স্টাইল পরিবর্তন করা যায়।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript দিয়ে SVG ক্লাস পরিবর্তন</title>
    <style>
        .highlight {
            fill: gold;
            stroke: red;
            stroke-width: 4;
        }
    </style>
</head>
<body>
    <h2>JavaScript দিয়ে SVG ক্লাস পরিবর্তন</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <circle id="dynamicCircle" cx="250" cy="200" r="50" fill="blue" stroke="black" stroke-width="2" />
    </svg>

    <button onclick="toggleHighlight()">হাইলাইট/অহাইলাইট করুন</button>

    <script>
        function toggleHighlight() {
            const circle = document.getElementById('dynamicCircle');
            circle.classList.toggle('highlight');
        }
    </script>
</body>
</html>

ব্যাখ্যা:

.highlight ক্লাস: বৃত্তের স্টাইল পরিবর্তন করে হাইলাইট ইফেক্ট দেয়।
toggleHighlight ফাংশন: বাটনে ক্লিক করলে বৃত্তের .highlight ক্লাস অ্যাসাইন বা রিমুভ করে।

৪.৩. JavaScript দিয়ে SVG এ টুলটিপ যোগ করা

JavaScript এবং CSS ব্যবহার করে SVG এলিমেন্টগুলোর উপর টুলটিপ যোগ করা যায়, যা ব্যবহারকারীদের আরও তথ্য প্রদান করে।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>JavaScript ও CSS সহ SVG টুলটিপ</title>
    <style>
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h2>JavaScript ও CSS সহ SVG টুলটিপ</h2>
    <svg id="tooltipSvg" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <rect id="tooltipRect" x="200" y="150" width="100" height="100" fill="lightgreen" stroke="black" stroke-width="2" />
    </svg>
    <div id="tooltip" class="tooltip">এটি একটি আয়তক্ষেত্র</div>

    <script>
        const svg = document.getElementById('tooltipSvg');
        const rect = document.getElementById('tooltipRect');
        const tooltip = document.getElementById('tooltip');

        rect.addEventListener('mousemove', function(event) {
            const rectBounds = svg.getBoundingClientRect();
            const mouseX = event.clientX - rectBounds.left;
            const mouseY = event.clientY - rectBounds.top;

            tooltip.style.left = `${event.pageX + 10}px`;
            tooltip.style.top = `${event.pageY + 10}px`;
            tooltip.style.opacity = 1;
            tooltip.textContent = 'এটি একটি আয়তক্ষেত্র';
        });

        rect.addEventListener('mouseout', function() {
            tooltip.style.opacity = 0;
        });
    </script>
</body>
</html>

ব্যাখ্যা:

.tooltip ক্লাস: টুলটিপের স্টাইল নির্ধারণ করে।
mousemove ইভেন্ট: মাউসের অবস্থান অনুযায়ী টুলটিপের পজিশন আপডেট করে এবং টুলটিপ দেখায়।
mouseout ইভেন্ট: মাউস আউট হলে টুলটিপ লুকিয়ে দেয়।

৫. SVG এর সাথে CSS এবং JavaScript এর ইন্টিগ্রেশন: আরও উন্নত উদাহরণ

৫.১. SVG আইকনসের সাথে CSS হোভার ইফেক্ট এবং JavaScript ইন্টারঅ্যাকশন

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>CSS হোভার এবং JavaScript ইন্টারঅ্যাকশন সহ SVG আইকন</title>
    <style>
        .icon {
            fill: #555;
            transition: fill 0.3s, transform 0.3s;
        }
        .icon:hover {
            fill: #FF6347;
            transform: scale(1.2);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>CSS হোভার এবং JavaScript ইন্টারঅ্যাকশন সহ SVG আইকন</h2>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <!-- হোম আইকন -->
        <path id="homeIcon" class="icon" d="M10 40 L50 10 L90 40 V90 H10 Z" />
    </svg>

    <p id="iconMessage">আপনি হোম আইকনে ক্লিক করুন!</p>

    <script>
        const homeIcon = document.getElementById('homeIcon');
        const message = document.getElementById('iconMessage');

        homeIcon.addEventListener('click', function() {
            message.textContent = 'হোম আইকনে ক্লিক করা হয়েছে!';
        });
    </script>
</body>
</html>

ব্যাখ্যা:

.icon ক্লাস: SVG পাথের স্টাইল এবং ট্রানজিশন নির্ধারণ করে।
:hover পছন্দ: হোভার করলে আইকনের রঙ পরিবর্তন হয় এবং এটি স্কেল হয়।
JavaScript ইভেন্ট হ্যান্ডলার: আইকনে ক্লিক করলে একটি মেসেজ পরিবর্তন হয়।

৫.২. SVG চার্টে CSS এবং JavaScript ব্যবহার করা

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>CSS এবং JavaScript সহ SVG চার্ট</title>
    <style>
        .bar {
            fill: steelblue;
            transition: fill 0.3s;
        }
        .bar:hover {
            fill: orange;
            cursor: pointer;
        }
        .bar.selected {
            fill: green;
        }
    </style>
</head>
<body>
    <h2>CSS এবং JavaScript সহ SVG বার চার্ট</h2>
    <svg id="barChart" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- বার চার্টের বর্গগুলি -->
        <rect class="bar" x="50" y="150" width="50" height="200" data-value="20" />
        <rect class="bar" x="150" y="100" width="50" height="250" data-value="40" />
        <rect class="bar" x="250" y="180" width="50" height="170" data-value="30" />
        <rect class="bar" x="350" y="80" width="50" height="270" data-value="50" />
    </svg>

    <p id="chartInfo">বারের উপর হোভার বা ক্লিক করুন!</p>

    <script>
        const bars = document.querySelectorAll('.bar');
        const chartInfo = document.getElementById('chartInfo');

        bars.forEach(bar => {
            // হোভার ইভেন্ট
            bar.addEventListener('mouseover', function() {
                const value = this.getAttribute('data-value');
                chartInfo.textContent = `বারের মান: ${value}`;
            });

            bar.addEventListener('mouseout', function() {
                chartInfo.textContent = 'বারের উপর হোভার বা ক্লিক করুন!';
            });

            // ক্লিক ইভেন্ট
            bar.addEventListener('click', function() {
                bars.forEach(b => b.classList.remove('selected'));
                this.classList.add('selected');
                const value = this.getAttribute('data-value');
                chartInfo.textContent = `আপনি একটি বার নির্বাচন করেছেন যার মান: ${value}`;
            });
        });
    </script>
</body>
</html>

ব্যাখ্যা:

.bar ক্লাস: বার চার্টের বর্গগুলোর স্টাইল এবং ট্রানজিশন নির্ধারণ করে।
:hover পছন্দ: হোভার করলে বারটির রঙ পরিবর্তন হয়।
data-value অ্যাট্রিবিউট: প্রতিটি বারটির মান সংরক্ষণ করে।
JavaScript ইভেন্ট হ্যান্ডলার: হোভার করলে বারটির মান প্রদর্শন করে এবং ক্লিক করলে নির্বাচিত বারটি হাইলাইট করে।

৬. Best Practices (শ্রেষ্ঠ অনুশীলন)

সেমান্টিক এবং অ্যাক্সেসিবিলিটি:
- Fallback কন্টেন্ট: SVG এলিমেন্টের ভিতরে fallback কন্টেন্ট প্রদান করুন যাতে SVG সমর্থন না করলে ব্যবহারকারীদের তথ্য প্রদান করা যায়।
- ARIA অ্যাট্রিবিউটস: SVG গ্রাফিক্সকে স্ক্রিন রিডার ব্যবহারকারীদের জন্য বোধগম্য করতে ARIA অ্যাট্রিবিউটস ব্যবহার করুন, যেমন role="img" এবং aria-label।
পারফরমেন্স অপ্টিমাইজেশন:
- Minimize SVG কোড: অপ্রয়োজনীয় স্পেস, কমেন্ট, এবং অতিরিক্ত ট্যাগ বাদ দিন।
- Optimize ইমেজ এবং রিসোর্স: SVG ফাইলের সাইজ কমাতে টুলস ব্যবহার করুন যেমন SVGO।
Responsive Design:
- ViewBox ব্যবহার: viewBox অ্যাট্রিবিউট ব্যবহার করে SVG গ্রাফিক্সকে রেসপনসিভ করে তুলুন।
- CSS ব্যবহার: CSS মিডিয়া কুয়েরি ব্যবহার করে SVG এর সাইজ এবং স্টাইল পরিবর্তন করুন বিভিন্ন ডিভাইসের জন্য।
স্টাইলিং এবং কাস্টমাইজেশন:
- CSS এর সাথে সমন্বয়: SVG গ্রাফিক্সকে CSS এর মাধ্যমে স্টাইলিশ করুন এবং তাদের রঙ, সাইজ, এবং অন্যান্য প্রপার্টি পরিবর্তন করুন।
- JavaScript ইন্টারঅ্যাকশন: SVG গ্রাফিক্সে ইন্টারঅ্যাকশন এবং অ্যানিমেশন যোগ করতে JavaScript ব্যবহার করুন।
ব্রাউজার সমর্থন:
- Cross-Browser Compatibility: নিশ্চিত করুন যে আপনার SVG গ্রাফিক্স সব প্রধান ব্রাউজারে সঠিকভাবে প্রদর্শিত হচ্ছে।
- Fallbacks প্রদান: পুরানো ব্রাউজারগুলির জন্য fallback ভ্যালিডেশন এবং বিকল্প উপায় বিবেচনা করুন।
Accessibility (অ্যাক্সেসিবিলিটি):
- স্পষ্ট লেবেল: SVG গ্রাফিক্সে স্পষ্ট লেবেল এবং টেক্সট ব্যবহার করুন যাতে স্ক্রিন রিডার ব্যবহারকারীরা সহজে বুঝতে পারে।
- Keyboard Navigable: ইন্টারেক্টিভ SVG ইলিমেন্টগুলো কীবোর্ডের মাধ্যমে নিয়ন্ত্রণযোগ্য করে তুলুন।
Maintenance এবং Readability:
- কমেন্ট ব্যবহার: SVG কোডে কমেন্ট ব্যবহার করে বিভিন্ন অংশের ব্যাখ্যা দিন।
- কোড অর্গানাইজেশন: SVG কোডকে সঠিকভাবে অর্গানাইজ করুন যাতে কোড মেইনটেইন করা সহজ হয়।

উপসংহার

SVG (Scalable Vector Graphics) হলো একটি শক্তিশালী এবং বহুমুখী ফরম্যাট যা ওয়েব ডেভেলপমেন্টে ভেক্টর গ্রাফিক্স তৈরি এবং প্রদর্শনের জন্য অত্যন্ত কার্যকর। CSS এবং JavaScript এর সাথে ইন্টিগ্রেশন করলে SVG গ্রাফিক্সকে আরও স্টাইলিশ, ইন্টারেক্টিভ এবং অ্যানিমেটেড করা যায়। Path, Circle, Rectangle, এবং Line আঁকার মাধ্যমে আপনি বিভিন্ন ধরনের গ্রাফিক্স এবং ডিজাইন তৈরি করতে পারেন, যা ওয়েবসাইটকে আরও প্রাণবন্ত এবং ইন্টারেক্টিভ করে তোলে।

টিপস:

ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - SVG আরও বিস্তারিত জানতে।
প্র্যাকটিস করুন: বিভিন্ন প্রকল্পে SVG ব্যবহার করে দেখুন এবং বিভিন্ন শেপ, টেক্সট, এবং ইমেজ আঁকার অভ্যাস করুন।
স্টাইলিং এবং কাস্টমাইজেশন: CSS এবং JavaScript ব্যবহার করে SVG গ্রাফিক্সকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করুন।
অ্যাক্সেসিবিলিটি নিশ্চিত করুন: SVG গ্রাফিক্সকে স্ক্রিন রিডার ব্যবহারকারীদের জন্য বোধগম্য করতে ARIA অ্যাট্রিবিউটস ব্যবহার করুন।
ব্রাউজার সমর্থন পরীক্ষা করুন: নিশ্চিত করুন যে আপনার টার্গেট অডিয়েন্সের ব্রাউজারগুলি SVG সমর্থন করে।

Content added By

Azizar Rahman Aziz

SVG কী এবং কিভাবে কাজ করে? SVG এর মাধ্যমে Vector Graphics তৈরি Path, Circle, Rectangle, এবং Line আঁকা

SVG এর সাথে CSS এবং JavaScript ইন্টিগ্রেশন

১. CSS এর সাথে SVG স্টাইলিং

১.১. ইনলাইন CSS স্টাইলিং

১.২. এম্বেডেড CSS স্টাইলিং

১.৩. এক্সটার্নাল CSS স্টাইলিং

১.৪. CSS সিলেক্টর ব্যবহার করে স্টাইলিং

১.৫. CSS অ্যানিমেশন ব্যবহার করে SVG অ্যানিমেট করা

২. JavaScript এর সাথে SVG ইন্টিগ্রেশন

২.১. SVG এলিমেন্টের DOM অ্যাক্সেস করা

২.২. SVG এর সাথে ইভেন্ট হ্যান্ডলিং

২.৩. SVG এর সাথে অ্যানিমেশন (JavaScript ব্যবহার করে)

৩. CSS এবং JavaScript এর সাথে আরও উন্নত ইন্টিগ্রেশন

৩.১. CSS ট্রানজিশন এবং ট্রান্সফরমেশন

৩.২. JavaScript দিয়ে ডাইনামিক স্টাইল পরিবর্তন

৩.৩. JavaScript দিয়ে SVG এ ড্র্যাগ অ্যান্ড ড্রপ ইন্টারঅ্যাকশন

৪. CSS এবং JavaScript এর সাথে SVG এর আরও উন্নত ইন্টিগ্রেশন

৪.১. CSS ট্রান্সিশন ব্যবহার করে SVG এলিমেন্ট পরিবর্তন

৪.২. JavaScript দিয়ে SVG এ ডাইনামিক ক্লাস অ্যাসাইন করা

৪.৩. JavaScript দিয়ে SVG এ টুলটিপ যোগ করা

৫. SVG এর সাথে CSS এবং JavaScript এর ইন্টিগ্রেশন: আরও উন্নত উদাহরণ

৫.১. SVG আইকনসের সাথে CSS হোভার ইফেক্ট এবং JavaScript ইন্টারঅ্যাকশন

৫.২. SVG চার্টে CSS এবং JavaScript ব্যবহার করা

৬. Best Practices (শ্রেষ্ঠ অনুশীলন)

উপসংহার

Promotion

Satt AI

Hi, আমি SATT AI!

SVG এর সাথে CSS এবং JavaScript ইন্টিগ্রেশন

১. CSS এর সাথে SVG স্টাইলিং

১.১. ইনলাইন CSS স্টাইলিং

১.২. এম্বেডেড CSS স্টাইলিং

১.৩. এক্সটার্নাল CSS স্টাইলিং

১.৪. CSS সিলেক্টর ব্যবহার করে স্টাইলিং

১.৫. CSS অ্যানিমেশন ব্যবহার করে SVG অ্যানিমেট করা

২. JavaScript এর সাথে SVG ইন্টিগ্রেশন

২.১. SVG এলিমেন্টের DOM অ্যাক্সেস করা

২.২. SVG এর সাথে ইভেন্ট হ্যান্ডলিং

২.৩. SVG এর সাথে অ্যানিমেশন (JavaScript ব্যবহার করে)

৩. CSS এবং JavaScript এর সাথে আরও উন্নত ইন্টিগ্রেশন

৩.১. CSS ট্রানজিশন এবং ট্রান্সফরমেশন

৩.২. JavaScript দিয়ে ডাইনামিক স্টাইল পরিবর্তন

৩.৩. JavaScript দিয়ে SVG এ ড্র্যাগ অ্যান্ড ড্রপ ইন্টারঅ্যাকশন

৪. CSS এবং JavaScript এর সাথে SVG এর আরও উন্নত ইন্টিগ্রেশন

৪.১. CSS ট্রান্সিশন ব্যবহার করে SVG এলিমেন্ট পরিবর্তন

৪.২. JavaScript দিয়ে SVG এ ডাইনামিক ক্লাস অ্যাসাইন করা

৪.৩. JavaScript দিয়ে SVG এ টুলটিপ যোগ করা

৫. SVG এর সাথে CSS এবং JavaScript এর ইন্টিগ্রেশন: আরও উন্নত উদাহরণ

৫.১. SVG আইকনসের সাথে CSS হোভার ইফেক্ট এবং JavaScript ইন্টারঅ্যাকশন

৫.২. SVG চার্টে CSS এবং JavaScript ব্যবহার করা

৬. Best Practices (শ্রেষ্ঠ অনুশীলন)

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!