Показать увеличенный SVG в заданном размере - PullRequest
0 голосов
/ 05 апреля 2011

У меня есть изображение SVG, которое соответствует его родительским <object> размерам.Изображение увеличивается, изменяя свойства currentScale и currentTranslate.Как я могу масштабировать изображение, которое будет отображаться в соответствии с его предполагаемым размером, и центрировать его в окне просмотра?

Пример кода:

<object width="500" height="300" data="pic.svg">
    <!-- The image will scale to be 300px heigh, 
         I need it to be shown at 32x32 and centered in the viewport,
         but could be zoomed to any size.
         Setting width and height attributes will crop the viewable area to 32x32,
         so we can't use this solution.
     -->
    <svg viewBox="0 0 32 32" ... >
</object>

Ответы [ 2 ]

1 голос
/ 01 июля 2011

Хорошо, я нашел решение.Для этого я получил нужный размер из width / height / viewbox (в зависимости от того, что доступно), сделал viewBox равным размеру доступного видового экрана (то есть содержащего тег <object>) и изменил значения x / y дляАтрибут viewBox, чтобы изображение отображалось в центре области просмотра, и удалил атрибуты width и height, если они присутствовали.

Я использую это в моем виджете Opera SVG Viewer можете посмотреть мою библиотеку масштабирования SVG здесь .

0 голосов
/ 05 апреля 2011

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

...