Solved

SVG Star

Posted on 2016-11-22
4
48 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
Comment
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 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 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 57

Accepted Solution

by:
Julian Hansen earned 250 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> 

Open in new window

Renders like this
-ss95.jpgWorking sample here
0
 

Author Closing Comment

by:AXISHK
ID: 41900042
Thx
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41900084
You are welcome.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

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. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

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

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

Join & Ask a Question