Με την ετικέτα <svg> μπορούμε να κάνουμε γεωμετρικά σχήματα στην HTML.
Παρακάτω δίνεται ένα παράδειγμα ενός κύκλου:
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<circle cx="120" cy="80" r="50"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Βρείτε ποιες μεταβλητές έχουν τις συντεταγμένες του κέντρου του κύκλου και της ακτίνας και σχεδιάστε διάφορους κύκλους διαφορετικών μεγεθών και χρωμάτων.
Ο παρακάτω κώδικας φτιάχνει ένα ορθογώνιο παραλληλόγραμμο:
<svg width="400" height="180">
<rect x="40" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Βρείτε τις συντεταγμένες του και κάντε κι άλλα παραλληλόγραμμα με άλλες διαστάσεις και χρώματα.
Βρείτε τον τρόπο να αλλάξετε την καμπυλότητα των γωνιών του σχήματος.
Παρακάτω δίνεται ένα παράδειγμα ενός κύκλου:
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<circle cx="120" cy="80" r="50"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Βρείτε ποιες μεταβλητές έχουν τις συντεταγμένες του κέντρου του κύκλου και της ακτίνας και σχεδιάστε διάφορους κύκλους διαφορετικών μεγεθών και χρωμάτων.
Ο παρακάτω κώδικας φτιάχνει ένα ορθογώνιο παραλληλόγραμμο:
<svg width="400" height="180">
<rect x="40" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Βρείτε τις συντεταγμένες του και κάντε κι άλλα παραλληλόγραμμα με άλλες διαστάσεις και χρώματα.
Βρείτε τον τρόπο να αλλάξετε την καμπυλότητα των γωνιών του σχήματος.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.