Как создать SVG-многоугольник с одинаковой шириной штриха?

Question

Я пытаюсь создать SVG-многоугольник с рамкой вокруг элемента (или в данном случае обводки). Это работает по большей части, однако обрезанные края многоугольника имеют более толстый ход, чем другие стороны. Есть ли способ обеспечить равномерность ширины обводки по форме?

Вот изображение, иллюстрирующее проблему

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

Код в основном такой:

<svg viewbox="0 0 100 100" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>

Answer 1

Штрих действительно имеет ширину 4 единиц, но его обрезает окно просмотра. Помните, что штрихи центрированы вдоль их пути, а не выровнены по одной стороне ...

... поэтому, если у вас есть окно просмотра 0 0 100 100, и у вас есть линия или путь, идущий от (0,0) до (0,100) и вы даете ему штрих 7px, тогда будет видна только 3.5px ширины этого штриха, потому что другая половина будет существовать между x = -3.5px и x = 0.

Если вы увеличите размер окна просмотра и / или переместите polygon так, чтобы его точки были не менее 4 "единиц" от стороны окна просмотра, тогда полный путь станет видимым:

(Это 4 " единицы », а не 4px, потому что ширина без единиц (например, stroke-width: 4;) в SVG предполагается в единицах окна просмотра относительно текущего набора преобразований, если это уместно - поэтому вы можете добавить явная единица для свойства stroke-width для согласованного рендеринга.

<svg viewbox="-5 -5 110 110" height="500" width="500">
  <polygon points="10, 0, 100, 0, 100, 90, 90, 100, 0, 100, 0, 10" style="fill:lime;stroke:purple;stroke-width:4" />
</svg>