Центр SVG неизвестного происхождения в известный SVG - PullRequest
Новая
       18

Центр SVG неизвестного происхождения в известный SVG

0 голосов
/ 28 апреля 2018

У меня есть программа (на основе Java), которая генерирует SVG из данных. Пользователь может загрузить свои SVG-файлы, чтобы они использовались для значков и маркеров, которые я использую в окончательном SVG-изображении.

Как это работает, у меня есть прямоугольник плахолдера, который я заменяю поставляемым SVG ... 

<svg xmlns="http://www.w3.org/2000/svg" height="176" version="1.1" viewbox="0 0 264 176" width="264">
   <!-- my own stuff -->
   <rect x="50" y="50" width="100" height="100" fill="none" class="placeholder" />
</svg>

Теперь я могу заменить прямоугольник в моем коде другим SVG и добавить атрибуты width и height, чтобы он масштабировался. 

<svg xmlns="http://www.w3.org/2000/svg" height="500" version="1.1" viewbox="0 0 500 500" width="500">
   <!-- my own stuff -->
   <svg x="50" y="50" width="100" height="100"  version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- inner unknown XML -->
    </svg>
</svg>

Проблема в том, что если внешние SVG не квадратные (1: 1), вы всегда получите смещение в горизонтальном или вертикальном направлении. Это можно легко исправить, считав значения для viewBox из внешних SVG. Но они не всегда присутствуют.

Если я открою внешний SVG в Chrome, я смогу увидеть вычисленные значения ширины и высоты, но в моем Java-коде я не могу получить доступ к вычисленной ширине и высоте курса.

Единственное решение, которое я вижу, это принуждение пользователя включить атрибут viewBox. Существуют ли другие решения, например, позиционирование элемента на основе его (вычисленного) центроида?

1 Ответ

0 голосов
/ 29 апреля 2018

Полный алгоритм, используемый средствами визуализации SVG для определения внутренних размеров, приведен в спецификации в разделе Свойства внутреннего размера для окна просмотра содержимого SVG , но с целью встраивания одного SVG в другое его можно упростить. :

  • x и y атрибуты на внешнем SVG должны игнорироваться
  • если внешний SVG имеет атрибут viewBox, используйте его. В противном случае,
    • если во внешнем SVG отсутствует хотя бы один из width или height, предполагается, что 100%
    • если width или height в абсолютных или относительно шрифта единиц, разрешите их в пользовательские единицы
    • , если width или height указаны в процентах, разрешите их в процентах от размера заполнителя к пользовательским единицам
  • установить viewBox из "0 0 <width> height>" с разрешенными значениями
  • установить width и height для значений заполнителей
  • установить preserveAspectRatio для позиционирования окна просмотра в окне просмотра
...