Як змінити масштаб впертого SVG, вбудованого в тег <object>?

114

У мене є деякі 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

— Цитракс
джерело

Я розгублений, останнє речення звучить як рішення, яке ви шукаєте? Встановити ширину / висоту SVG на 100% / 100% залишає його в HTML, щоб визначити область для його малювання?

— позначити

3

Проблема полягає в тому, що я не знайшов способу змінити це в бібліотеці, яку використовую для створення файлів svg. І для мене було б сенс, якби я міг переосмислити це з html. Тому в основному мені цікаво, чи є інше рішення, ніж змінити файли svg.

— Zitrax

161

Ви можете додати до <svg>тега атрибути "serveAspectRatio "та" viewBox ", щоб досягти цього.

Відкрийте .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

— Джим Келлер
джерело

2

#protip все, що вам потрібно, щоб додати це резервAspectRatio = "xMinYMin meet"

— samccone

4

@samccone: Здається, preserveAspectRatio="xMinYMin meet"мені просто не вистачало. Мені також потрібно було вказати, viewBoxяк зазначено у відповіді. Шкода!

— Фріріх Раабе

1

Ви також можете зробити це, preserveAspectRatio="none"якщо ви хочете розтягнути SVG довільними способами.

— Метт Крінклау-Фогт

5

Не підпадайте під те саме питання, що і я: "viewbox"! = "ViewBox" :)

— Dr.ÜT.

Крім того, мені довелося встановити фактичні атрибути ширини та висоти, 100%як зазначено у цій відповіді .

— ComFreek

35

Жоден із наведених тут відповідей не працював для мене, коли я запитав це ще у 2009 році. Оскільки я знову мав ту саму проблему, я помітив, що використання <img>тегу та ширини разом із svg працює чудово.

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

— Цитракс
джерело

6

Це набагато простіше, ніж інші варіанти! У разі, якщо хтось цікавий, ось таблиця, в якій браузери можуть обробляти SVG в тегах <img> .

— dimo414

5

Це може бути найкращим шляхом, якщо в SVG немає гіперпосилань, інакше img недостатній, і все одно потрібно використовувати альтернативу, як вбудовувати.

— sdupton

12

Під час використання <img>ви втрачаєте всю інтерактивність за допомогою посилань, javascript тощо

— gilly3

5

Незначні: Елемент img повинен бути самозакритим, тобто <img width="400" src="image.svg"/>.

— Ян Агаард

4

@JanAagaard: Закривати тег img не потрібно, за винятком XHTML.

— Петро В. Морч

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 пікселів у вашому документі. Інші svgs можуть скористатися новим оглядовим кодом, отриманим із рекламованої ширини та висоти (це часто однакові цифри). Інші веб-переглядачі можуть скористатися різними настроями 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" />

Ця установка працювала для мене.

— Н Титан
джерело

Це насправді працює досить добре! Дійсно важлива річ - це насправді визначитись 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 tag! Ідеально!

— Грег Елліс

5

Встановіть відсутнє вікно перегляду та заповніть значення висоти та ширини заданих атрибутів висоти та висоти у тезі svg
Потім просто масштабуйте зображення, встановивши висоту та ширину на потрібні відсоткові значення. Удачі.
Ви можете встановити фіксований співвідношення сторін із збереженням зберіганняAspectRatio = "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">

— Лоренц Ло Зауер
джерело

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

— Дітер Грібніц
джерело