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

Question

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

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

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

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

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

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

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

653 9

html svg

9 ответов:

Comments

Ничего не найдено.

Jim Keller · Accepted Answer · 2010-10-16 02:03:31

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

открыть .SVG-файл в редакторе и найдите <svg> тег. в этот тег, добавьте следующие атрибуты:
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
замените {width} и {height} на некоторые значения по умолчанию для окна просмотра. Я использовал значения из атрибутов" ширина "и" высота " тега SVG, и это, казалось, работало.

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

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

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

Zitrax · Accepted Answer · 2013-12-10 10:10:15

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

joeforker · Accepted Answer · 2009-08-08 07:43:31

вы можете добраться до встроенного 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 могут извлечь выгоду из нового окна просмотра, полученного из объявленной ширины и высоты (это часто одни и те же числа). Другие браузеры могут извлечь выгоду из различных настроек svg.

H Titan · Accepted Answer · 2012-10-19 01:57:06

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

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

Andrew Swift · Accepted Answer · 2014-07-29 18:59:07

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

Lorenz Lo Sauer · Accepted Answer · 2011-09-16 22:30:06

установить отсутствует окно просмотра и заполните значения высоты и ширины заданных атрибутов высоты и высоты в теге 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">

Vlado · Accepted Answer · 2012-04-11 19:04:56

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

PhiLho · Accepted Answer · 2009-03-14 12:07:38

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

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

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

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

Dieter Gribnitz · Accepted Answer · 2014-05-04 16:48:24

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