Как мне масштабировать упрямый SVG с тегом <object>? - PullRequest
Новая
       19

Как мне масштабировать упрямый SVG с тегом <object>?

108 голосов
/ 14 марта 2009

У меня есть несколько файлов SVG, в которых указаны width и height, а также viewbox, например: 

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

а как их отобразить в браузере в размере, который я решу? Я хочу их поменьше и попробовал: 

<object width="400" data="image.svg"></object>

но тогда я получаю видимые полосы прокрутки.

Это работает, если я изменю SVG-файлы на width и height на 100%, но я хочу определить размер в HTML независимо от того, какие размеры используются в SVG-файле. Это возможно ?

Ответы [ 9 ]

159 голосов
/ 14 августа 2010

Вы можете добавить атрибуты «preserveAspectRatio» и «viewBox» к тегу <svg>, чтобы выполнить это.

Откройте файл .svg в редакторе и найдите тег <svg>. в этот тег добавьте следующие атрибуты: 

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Замените {width} и ​​{height} некоторыми значениями по умолчанию для viewBox. Я использовал значения из атрибутов "width" и "height" тега SVG, и это, похоже, сработало.

Сохраните SVG, и теперь он должен масштабироваться, как и ожидалось.

Я нашел эту информацию здесь:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

32 голосов
/ 15 ноября 2011

Ни один из ответов, приведенных здесь, не работал для меня, когда я задал этот вопрос еще в 2009 году. Поскольку у меня снова возникла та же проблема, я заметил, что использование тега <img> и ширины вместе с svg работает нормально. 

<img width="400" src="image.svg">
9 голосов
/ 19 октября 2012 
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

IMG / logo.svg ... 

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Эта настройка работала для меня.

9 голосов
/ 08 августа 2009

Вы можете войти во встроенный svg, используя JavaScript: 

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Поскольку у вашего svg уже есть viewBox, Firefox должен масштабировать ширину 576 пикселей в viewBox до ширины 400 пикселей в вашем документе. Другие svgs могут извлечь выгоду из нового viewBox, полученного из объявленных ширины и высоты (это часто те же самые числа). Другие браузеры могут извлечь выгоду из различных настроек SVG.

7 голосов
/ 29 июля 2014

Я столкнулся с проблемой, когда iOS на iPad не может правильно изменить размер SVG-изображений в теге <object>.

Стиль CSS увеличит или уменьшит размер контейнера <object>, но изображение внутри него не будет изменено (на iPad, iOS 7).

Изображения SVG были экспортированы из Adobe Illustrator, и решением оказалось заменить ширину и высоту следующим образом: 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

с: 

width="100%" height="100%"

Мне нужно было использовать тег <object>, потому что тег <img> в настоящее время не поддерживает встраивание растровых изображений в SVG.

5 голосов
/ 16 сентября 2011

  1. Установите отсутствующее окно просмотра и заполните значения высоты и ширины заданных атрибутов высоты и высоты в теге svg

  2. Затем масштабируйте изображение просто, , установив высоту и ширину на желаемый процент значений. Удачи.

  3. Вы можете установить фиксированное соотношение сторон с помощью preserveAspectRatio = "x200Y200 meet, но это не обязательно

, например 

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">
3 голосов
/ 11 апреля 2012

Просто используйте CSS, чтобы браузер изменил размер SVG! Вот так: <object style="width:30%"> См. http://www.vlado -do.de / svg_test / для получения более подробной информации. Я только что попробовал это локально с SVG, ширина и высота которого указаны в «pt». Хорошо работает в Firefox.

1 голос
/ 04 мая 2014

Вот PHP-решение, использующее QueryPath на основе ответа Джима Келлера.

После загрузки QueryPath просто передайте свой svg-скрипт в функцию. 

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
1 голос
/ 14 марта 2009

Давай посмотрим. Мне пришлось освежить память о SVG, я не пользовался ею много лет.

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

Если, как указано, вы не указали размер SVG в процентах ИЛИ не указали viewBox (например, viewBox = "0 0 600 500").

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

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

Нет похожих вопросов

...