Как создать многоугольник с помощью SVG? - PullRequest
Новая
       22

Как создать многоугольник с помощью SVG?

0 голосов
/ 29 мая 2019

Я хочу создать многоугольник, как на картинке ниже.

Я наткнулся на следующий многоугольник, но я не уверен, как сделать так, как на картинке. 

html,
body,
svg {
  height: 100%;
  background-color: #000;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="white" points="0,100 200,0 300,100"/>
</svg>

Но проблема в том, что я хочу, чтобы верхняя линия проходила параллельно нижней. * 1011 т.е. *

Также, пожалуйста, объясните, как работает точка, как 

points = 'x1 y1, x1 y2, x3 y3, x3,y4'

Изображение:

1 Ответ

0 голосов
/ 29 мая 2019

С MDN :

Для <polygon>, points определяет список точек, каждая из которых представляет вершину фигуры, которую нужно нарисовать.Каждая точка определяется координатами X и Y в пользовательской системе координат

Итак, вам нужно points="x1,y1 x2,y2 x3,y3 x4,y4", но у вас есть x2 == x1 и x4 == x3, так что на самом деле это points="x1,y1 x1,y2 x3,y3 x3,y4"

Ваш svg также пропускает stroke="black", чтобы нарисовать черную границу на вашем белом многоугольнике, и viewBox может иметь лучшие координаты.

Рабочий пример ниже: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none">
    <polygon fill="white" stroke="black" points="0,0 0,100 100,150 100,50"/>
</svg>
...