Как я могу масштабировать 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 файле. Это возможно?

Ответы

Ответ 1

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

<img width="400" src="image.svg">

Ответ 2

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

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

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

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

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

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

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

Ответ 3

Вы можете обратиться к встроенному 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.

Ответ 4

<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" />

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

Ответ 5

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

Ответ 6

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

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

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

например.

 <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">

Ответ 7

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

Ответ 8

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

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

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

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

Ответ 9

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

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

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();
}