SVG многоугольник

[DivMan]

Читаю книгу и в ней  есть код 

<svg width="300px" height="360px">	<polygon points="20,10 200,20 180,90 120,150 50,100"	fill="#00FFFF"	stroke="blue" stroke-width="5"	/></svg>

http://jsfiddle.net/vad7wgz9/

 

Но в ней не написано, как вычислять эти цифры.

Как вычислять? Наугад писать?

Я так понял то что 20,10  20 это x, а 10 это y? или как?

 

 

20,10 200,20 180,90 120,150 50,100 это наверно сокращённая запись?

Edited October 18, 2014 by DivMan

[SelenIT]

Каждая пара чисел — это X- и Y-координаты очередной точки. Тот же принцип, что для coords у <area shape="poly">.

[swandev]

Читаю книгу и в ней  есть код 

<svg width="300px" height="360px">	<polygon points="20,10 200,20 180,90 120,150 50,100"	fill="#00FFFF"	stroke="blue" stroke-width="5"	/></svg>

http://jsfiddle.net/vad7wgz9/

 

Но в ней не написано, как вычислять эти цифры.

Как вычислять? Наугад писать?

Я так понял то что 20,10  20 это x, а 10 это y? или как?

 

 

20,10 200,20 180,90 120,150 50,100 это наверно сокращённая запись?

ну руками думаю не нужно это все писать, иллюстратор может все сам за вас сделать

[lexxcode]

20,10 -- это x,y

значения не наугад. В svg есть понятие viewBox его можно явно указывать в теге svg, что задает как бы развертку сцены svg картинки, а width  height задают физические размеры картинки. 

http://jsfiddle.net/alexriz/ztsygujx/

<svg width="500px" height="500px" viewBox="0 0 250 250">	<polygon points="20,10 200,10 200,190 20,190"	fill="#00FFFF"	stroke="blue" stroke-width="1"	/></svg>

Отсчет координат ведется именно от этого самого viewBox

 

В данном примере размер, так называемой сцены, 250x250px, но размер самого svg увеличивается до 500x500px, то есть масштабирует картинку в два раза

[DivMan]

 

 

ну руками думаю не нужно это все писать, иллюстратор может все сам за вас сделать

 

 

А поподробней можно?

[swandev]

 

 

ну руками думаю не нужно это все писать, иллюстратор может все сам за вас сделать

 

 

А поподробней можно?

 

А что подробней?) Нарисовать такой же многоугольник в иллюстраторе например и сохранить в svg, и тогда не нужно писать эти точки самому

Edited October 19, 2014 by ALEEX SWN

[lexxcode]

и тогда не нужно писать эти точки самому

А если нужно будет управлять svg-шкой из js (а оно нужно будет на определенном этапе) , то все равно придется изучать что и как работает

[mrnobody]

Если не сложно, напишите какую книгу вычитаете? Книга только об SVG?

[lexxcode]

Если не сложно, напишите какую книгу вычитаете? Книга только об SVG?

 

Я? эмм.... никакую.  Запрос в гугле svg дает доступ к тоннам информации

[DivMan]

Книга старовата http://www.ozon.ru/context/detail/id/5813692/

[Galaxy]

Вот неплохой набор инфы http://css-tricks.com/mega-list-svg-information/    https://github.com/willianjusten/awesome-svg

Edited October 19, 2014 by Galaxy