3

Почему данный polygon не отображается?

<svg>
  <polygon points="569.2050807568878,518 396,618 222.7949192431123,518.0000000000001 222.79491924311225,318.00000000000006 395.99999999999994,218 569.2050807568878,318.00000000000006" fill="none" stroke="orange" />
</svg>

2

1 ответ 1

3

Вот конечный результат, в котором нет лишних пустых полей, шестиугольник расположен по центру SVG и код оптимизирован (один знак после запятой вместо 14-ти)

Красная рамка это границы холста SVG:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
 width="346.4" height="400" viewBox="222.8 218 346.4 400" style="border:1px solid crimson">
  <polygon id="poly" points="569.2 518 396 618 222.8 518 222.8 318 396 218 569.2 318" fill="none" stroke="orange" stroke-width="4"/>
</svg>
<script>
console.log(poly.getBBox())
</script>

Как это сделано:

Полигону присвоен id="poly" и с помощью метода JS getBBox() выводятся минимально, достаточные координаты, ширина и высота прямоугольника описывающего полигон.

Эти данные подставляются во viewBox="222.8 218 346.4 400" width="x", hieght="y"

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.