Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
Solved

# SVG Star

Posted on 2016-11-22
Medium Priority
59 Views
Last Modified: 2016-11-23
For the 5 points in SVG start, does it correspond to x, y coordination ?

Where does 0,0 refer ? Does it refer based on the width and height of the svg ?  Thx

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
0
Question by:AXISHK
[X]
###### Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points
• Learn & ask questions
• 2
4 Comments

LVL 84

Assisted Solution

Dave Baldwin earned 1000 total points
ID: 41898645
This article https://en.wikipedia.org/wiki/Scalable_Vector_Graphics shows 0,0 to be the upper left corner of the SVG object.
0

LVL 59

Accepted Solution

Julian Hansen earned 1000 total points
ID: 41898742
Consider this progressive drawing of the star
``````<svg width="300" height="200" style="border: 1px solid black">
<polygon points="0,0,100,10"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="300" height="200" style="border: 1px solid black">
<polygon points="100,10 40,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="300" height="200" style="border: 1px solid black">
<polygon points="100,10 40,198 190,78"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="300" height="200" style="border: 1px solid black">
<polygon points="100,10 40,198 190,78 10,78"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="300" height="200" style="border: 1px solid black">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
``````
Renders like this
Working sample here
0

Author Closing Comment

ID: 41900042
Thx
0

LVL 59

Expert Comment

ID: 41900084
You are welcome.
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
###### Suggested Courses
Course of the Month8 days, 11 hours left to enroll

#### 721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.