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

115

У меня есть некоторые 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. Это возможно ?

html svg

— Zitrax
источник

Я запутался, последнее предложение читается как решение, которое вы ищете? Установите ширину / высоту SVG на 100% / 100%, оставив это на усмотрение HTML, чтобы определить область для его рисования?

— отметка

3

Проблема в том, что я не нашел способа изменить это в библиотеке, которую я использую для создания файлов svg. И для меня было бы разумно, если бы я мог переопределить это из html. Так что в основном мне интересно, есть ли другое решение, кроме как изменить файлы svg.

— Zitrax,

162

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

— Джим Келлер
источник

2

#protip все, что вам нужно, чтобы добавить это preserveAspectRatio = "xMinYMin meet"

— samccone

4

@samccone: Мне кажется, этого preserveAspectRatio="xMinYMin meet"было мало. Мне также нужно было предоставить, viewBoxкак указано в ответе. Жалость!

— Frerich Raabe

1

Вы также можете сделать это, preserveAspectRatio="none"если хотите растянуть svg произвольным образом.

— Мэтт Кринкло-Фогт,

5

Не попадайтесь на ту же проблему, что и я: "viewbox"! = "ViewBox" :)

— доктор Ю.

Кроме того, мне пришлось установить фактические атрибуты ширины и высоты, 100%как указано в этом ответе .

— ComFreek

35

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

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

— Zitrax
источник

6

Это намного проще, чем другие варианты! Если кому-то интересно, вот таблица, в которой браузеры могут обрабатывать SVG в тегах <img> .

— dimo414

5

Это может быть лучший путь, если в SVG нет гиперссылок, в противном случае img недостаточно, и все равно нужно использовать альтернативу, такую как embed.

— sdupton

12

Когда вы используете, <img>вы теряете всякую интерактивность со ссылками, javascript и т. Д.

— gilly3

5

Minor: Элемент IMG должен быть сам замкнут, то есть <img width="400" src="image.svg"/>.

— Ян Агард

4

@JanAagaard: закрывать тег img не требуется, за исключением XHTML.

— Peter V. Mørch

9

Вы можете войти во встроенный SVG с помощью JavaScript:

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

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

— joeforker
источник

1

Это дало мне:Security error: attempted to read protected variable

— Zitrax

1

Размещается ли svg в том же домене, что и ваша веб-страница?

— joeforker

1

Это не было (от локального до внешнего), так что, вероятно, это так, однако в итоге я использовал свой ответ ниже, поскольку он был проще.

— Zitrax

9

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

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

— H Титан
источник

Это действительно хорошо работает! Действительно важно определить viewBox="0 0 640 80". Очевидно, если это не определено, вы не можете масштабировать его или позволить CSS масштабировать его для вас, например, width: 100%и т. Д.

— Игорь

8

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

— Эндрю Свифт
источник

Это правильный ответ, особенно если у вас есть встроенный SVG и вы не используете тег <img! Отлично!

— Грег Эллис,

5

Задайте отсутствующее окно просмотра и заполните значения высоты и ширины установленных атрибутов высоты и высоты в теге svg
Затем масштабировать изображение , просто установив ширину и высоту до нужных процентов значений. Удачи.
Вы можете установить фиксированное соотношение сторон с помощью 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

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

— Владо
источник

1

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

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

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

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

— PhiLho
источник

Бэкэнд svg в matplotlib. Я пробовал такие функции, как set_figwidth (val), но, похоже, они не работают, но я не очень знаком с этой библиотекой, поэтому, возможно, смотрю не те функции.

— Zitrax,

1

Вот решение 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();
}

— Дитер Грибниц
источник