Заливка узором SVG работает для , но неправильно масштабируется для ⇐ CSS

[Anonymous]

Я работаю с SVG, который включает заливку, которая отображается правильно при применении к , но когда я применяю тот же шаблон к
, он масштабируется до чрезвычайно маленький размер. Если я использую сплошной цвет, например fill="yellow", многоугольник отображается правильного размера и формы, поэтому я считаю, что проблема связана с тем, как шаблон применяется к .

Код: Выделить всё

fill="url(#pattern0_1011_2713)"
style="pointer-events: auto;" />

Что я пробовал:
Использование сплошных цветов: когда я устанавливаю fill="yellow" для многоугольника, он отображается правильной формы и размера, поэтому проблема кажется специфично для приложения шаблона.
Масштабирование шаблона: я экспериментировал со значениями PatternContentUnits="objectBoundingBox" и Transform="scale(...)" в элементе, но эти изменения не решили проблему масштабирования.
Цель:
Я хочу, чтобы узор заполнял многоугольник так же, как он заполняет прямоугольник — без уменьшения или смещения. Я пытаюсь создать игру типа Settlers of Catan, используя React, и этот SVG предназначен для земли, но, как вы можете видеть ниже, сам SVG имеет размер 512 x 512, но его видимая область - это многоугольник, который я наметил, т.е. (0, 128)(128, 128)(512, 128)(128, 0). Причина этого в том, что я хочу, чтобы только видимая часть включала события указателя

Вопрос:
Как я могу настроить или, чтобы шаблон правильно заполнил многоугольник без проблем с масштабированием? Существует ли особый подход к использованию шаблонов с многоугольниками, который я, возможно, упустил из виду?
Спасибо за любые идеи и решения!

Подробнее здесь: https://stackoverflow.com/questions/791 ... on-polygon