Как мы можем автоматически центрировать различные пути SVG в их окнах просмотра?

Question

надеюсь, что кто-нибудь может помочь, это было несколько дней, я застрял на этом.

мы разрешаем нашим пользователям загружать свои собственные значки SVG в виде SVG Path в нашем администраторе backoffice, чтобы мы могли использовать этот путь в сенсорных приложениях на разных языках (таким образом, мы можем раскрасить путь, заполнить его или нет в соответствии с взаимодействием) , (Так что нет, мы не можем использовать PNG).

Теперь мы пытаемся отобразить путь в веб-представлении, чтобы можно было перечислить существующие значки.
Но пути совершенно отличаются друг от друга, координаты иногда начинаются с 0,0, иногда от центра холста (обычно создаваемого в Illustrator), поэтому у нас есть значки разного размера и разных выравниваний.

• Некоторые маленькие и начинаются с 0,0
• Некоторые ширины и начинаются с 500 200

Пример: маленькая иконка --- большая иконка

и мне нужно, чтобы они все были в квадрате по центру, одинакового размера (который должен быть возможен, в конце концов, они только векторные)

ожидаемый результат

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

Я устанавливаю путь SVG в качестве фона и пытаюсь центрировать изображение. Это сработало ! (неожиданно) Но это работает только для иконки больше, чем область просмотра. Если значок маленький, он просто продолжает стоять влево. вот мои 5 тестов

https://codepen.io/XavDeb/pen/zQPZXz

HTML

    <!-- background test 2 -->
    <div class="float">background test glass plate <br>
      <div id="background2">2 </div>
    </div>

CSS

svg {
  width : 200px;
  height : 200px;
  border:solid black;
}
#background2 {
  width : 200px;
  height: 200px;
  border : solid 1px blue;
  background-image : url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 100"><path d="M 323.423,59.2223L 319.407,59.2223C 318.136,59.2223 317.157,58.1303 317.279,56.8649C 317.655,52.9329 317.249,43.9009 309.957,28.4276C 309.661,27.8009 310.431,27.2089 310.945,27.6743C 315.561,31.8516 325.4,45.3969 325.06,54.3369C 325.06,57.8969 325.061,56.3969 325.063,57.5876C 325.064,58.4943 324.329,59.2223 323.423,59.2223 Z M 303.227,16.2969C 300.342,15.7223 297.363,15.4169 294.309,15.4169C 291.14,15.4169 288.047,15.7436 285.06,16.3623L 285.06,7.25027C 285.06,6.2116 285.937,5.33294 286.976,5.33294L 301.309,5.33294C 302.349,5.33294 303.227,6.2116 303.227,7.25027M 343.393,57.8329L 339.617,57.8329C 338.391,39.0489 325.751,23.3889 308.56,17.7103L 308.56,7.25027C 308.56,3.26227 305.297,-0.000396729 301.309,-0.000396729L 286.976,-0.000396729C 282.989,-0.000396729 279.727,3.26227 279.727,7.25027L 279.727,17.8236C 262.705,23.5929 250.221,39.1716 249.003,57.8329L 245.393,57.8329C 243.193,57.8329 241.393,59.6329 241.393,61.8329C 241.393,64.0329 243.193,65.8329 245.393,65.8329L 343.393,65.8329C 345.593,65.8329 347.393,64.0329 347.393,61.8329C 347.393,59.6329 345.593,57.8329 343.393,57.8329 Z" ></path></svg>');

  background-repeat : repeat;
  background-position: center;
  background-color :green;
  background-size : cover;

} 

Это почти работает, но тот же код с маленькой иконкой вообще не работает.

Есть ли какой-нибудь путь к успеху, что я пытаюсь сделать? (или я должен просто перефразировать все иконки)

Answer 1

Некоторые методы, которые вы используете в этом CodePen (например, background-image), не могут быть изменены во время выполнения для автоматического масштабирования ваших SVG.

Но для встроенных SVG вы можете сделать что-то вроде этого:

var PADDING = 0.2;  // 20% padding on all sides
var svgElements = document.querySelectorAll('.float > svg'); 
svgElements.forEach(function(svg) {
  var bbox = svg.getBBox();
  var padX = PADDING * bbox.width;
  var padY = PADDING * bbox.height;
  var viewbox = [bbox.x - padX, bbox.y - padY,
                 bbox.width + 2*padX, bbox.height + 2*padY].join(' ');
  svg.setAttribute('viewBox', viewbox);
});

Пример codepen: https://codepen.io/PaulLeBeau/pen/ZNvzzp

Это должно работать для большинства хорошо созданных SVG.Но он не может автоматически исправить плохие SVG.Как твои последние два.Которые, кажется, имеют плохие <pattern> определения.