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

У меня есть несколько файлов 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 ответов

Решение

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

<img width="400" src="image.svg">
Источник

Вы можете добавить атрибуты "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

Источник 
<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" />

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

Источник

Вы можете войти во встроенный 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.

Источник

Я столкнулся с проблемой, когда 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.

Источник

  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">
Источник

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

Источник

Вот 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();
}
Источник

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

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

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

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

Источник
Другие вопросы по тегам