predefined shapes Link to heading
There are at least seven predefined SVG shape elements that can be used, which are rectangle, circle, ellipse, line, polyline, polygon, and path (W3Schools, 2023). Here the first shape element is presented, rectangle rect
element.
svg Link to heading
- Default values
width="300"
height="150"
rect, width, height Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect width="50" height="50"></rect> </svg> {{< /html >}}
- Result
rect, x, y Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect x="80" y="40" width="50" height="50"></rect> </svg> {{< /html >}}
- Result
rect, stroke, color, opacity (fill: none) Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect x="40" y="25" width="100" height="60" style=" stroke: blue; stroke-width: 2px; fill: none;"> </rect> <rect x="70" y="45" width="100" height="60" style=" stroke: blue; stroke-width: 2px; fill: none;"> </rect> <rect x="120" y="65" width="100" height="60" style=" stroke: blue; stroke-width: 2px; stroke-opacity: 0.5; fill: none;"> </rect> {{< /html >}}
- Result
rect, fill, color, opacity Link to heading
- Code
{{< html >}} <rect x="40" y="25" width="100" height="60" style=" fill: lightblue;"> </rect> <rect x="70" y="45" width="100" height="60" style=" fill: blue; fill-opacity: 0.2;"> </rect> <rect x="120" y="65" width="100" height="60" style=" fill: blue; fill-opacity: 0.5;"> </rect> {{< /html >}}
- Result
rect, animate Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect x="0" y="50" width="50" height="50"> <animate attributeName="x" from="0" to="300" begin="0s" dur="2s" repeatCount="indefinite" /> </rect> </svg> {{< /html >}}
- Result
rect, rotate Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect x="150" y="75" width="50" height="50"> <animateTransform attributeName="transform" type="rotate" from="0 150 75" to="360 150 75" begin="0s" dur="3s" repeatCount="indefinite" /> </rect> </svg> {{< /html >}}
- Result
rect, scale Link to heading
- Code
{{< html >}} <svg style="background: #eee;"> <rect x="0" y="0" width="50" height="50"> <animateTransform attributeName="transform" type="scale" from="1 1" to="6 3" begin="0s" dur="3s" repeatCount="indefinite" /> </rect> </svg> {{< /html >}}
- Result