Menu
I'm trying to create an SVG with base and height 100px. But not sure if it is correct. I'm not getting the exact output as I need. Below is the code sample
<svg id="triangle" viewBox="0 0 100 100">
<polygon points="50 15, 100 100, 0 100"/>
</svg>Please correct me where I'm doing wrong. I really appreciate your help.
Thank you!
497
Wrap in a container and set the size as a percentage. Then it will be possible to adjust the size and the shape will be adaptive.
.container {
width:30%;
height:30%;
}<div class="container">
<svg id="triangle" viewBox="0 0 100 100">
<polygon points="50 15, 100 100, 0 100"/>
</svg>
</div>
second option without using the container:
<svg id="triangle" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%" viewBox="0 0 100 100">
<polygon points="50 15, 100 100, 0 100"/>
</svg>third option
Write syntax as per specification polygon
The comma must separate the coordinate "X" and "Y"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" style="border:1px solid gray;" >
<polygon points="50, 13.397 100, 100 0, 100"/>
</svg>Update
Reply to comments
The compiler still giving me an error that it is not a valid triangle.
To validate the file I added the required parameters
<!DOCTYPE html>
<head>
<title>Triangle</title>
</head>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" >
<polygon points="50, 13.397 100, 100 0, 100/>
</svg>Download this file to the validator https://validator.nu/
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
