Почему я не вижу многоугольник, нарисованный в этом svg, и как я могу сделать его видимым? - PullRequest
1 голос
/ 23 апреля 2019

Справочная информация: я разрешаю пользователям рисовать на GoogleMap, а затем вытягиваю точки, которые они рисуют на нем, чтобы создать svg, который пользователи могут назвать и ссылаться позже.Кажется, это работает, когда эти рисунки достаточно велики, но у меня возникает проблема, когда они очень маленькие (например, многоугольник вокруг небольшого парка).

Вы можете поиграть с этой версиейздесь: https://codepen.io/glenpierce/pen/MRqwmJ?editors=1010

Когда я проверяю фактические полигоны в svgs, они, кажется, помещаются в viewBox, и я думаю, что они должны быть видимыми, но я не могу заставить их появляться.Когда я устанавливаю обводку svgs на любую ширину выше 0, обводка полностью занимает весь viewBox.Я думал, что svgs были "масштабируемыми".Есть ли какие-то правила относительно очень маленьких десятичных значений или чего-то еще?Если так, где я могу найти ссылку на это?

Есть ли способ масштабировать (или иным образом исправить) многоугольник в этом svg в vanilla JS, чтобы сделать его видимым в этом svg?

<svg
height="180px"
width="360px"
viewBox="
92.52881560431149
43.41319404777748
0.0024139881134033203
0.00027281812062796007

"><polygon points="
92.5290516387048,
43.41319404777748,
92.53095064268734,
43.4132456619112,
92.53122959242489,
43.413400504607246,
92.52903018103268,
43.41346686589811,
92.52881560431149,
43.4132087946678
"></polygon></svg>

примечание: я отредактировал интервал для облегчения чтения.

how it looks in codepen

См. Вышекак это работает на зеленом треугольнике, но вы можете видеть, что я выделил прямоугольник, который не виден в других svg.

1 Ответ

2 голосов
/ 23 апреля 2019

Похоже, что у svgs есть ограничения по точности: «Используя плавающие с одинарной точностью, средства просмотра SVG не должны корректно отображать различия между двумя значениями, меньшими, чем 1/4 000 000 от большего числа (это 1 на 2, к степени 22, примерно). На практике очень немногие достигают даже этого. "

источник: https://oreillymedia.github.io/Using_SVG/extras/ch08-precision.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...