it-swarm.com.ru

Как я могу сделать масштаб SVG с его родительским контейнером?

Я хочу иметь встроенную шкалу содержимого элемента SVG, когда размер не является родным. Конечно, я мог бы иметь его как отдельный файл и так масштабировать.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Тем не менее, я хочу добавить дополнительные стили в SVG через CSS, так что связывать внешние стили нельзя. Как сделать встроенную шкалу SVG?

180
bjb568

Чтобы указать координаты в изображении SVG независимо от масштабированного размера изображения, используйте атрибут viewBox в элементе SVG, чтобы определить, какая ограничительная рамка изображения находится в системе координат изображения, и используйте атрибуты width и height определить ширину или высоту относительно содержащей страницы.

Например, если у вас есть следующее:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Он будет отображаться как треугольник размером 10 на 20 пикселей:

10x20 triangle

Теперь, если вы установите только ширину и высоту, это изменит размер элемента SVG, но не изменит масштаб треугольника:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 triangle

Если вы установите окно просмотра, это заставит его трансформировать изображение таким образом, чтобы данное поле (в системе координат изображения) масштабировалось так, чтобы оно соответствовало заданной ширине и высоте (в системе координат страницы). Например, чтобы увеличить треугольник до 100 на 50 пикселей:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

Если вы хотите увеличить его до ширины окна просмотра HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x150 triangle

Обратите внимание, что по умолчанию соотношение сторон сохраняется. Поэтому, если вы укажете, что элемент должен иметь ширину 100% и высоту 50 пикселей, он будет фактически масштабироваться только до высоты 50 пикселей (если у вас нет очень узкого окна):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

Если вы действительно хотите, чтобы он растягивался горизонтально, отключите сохранение пропорций с помощью preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x50 triangle

(обратите внимание, что хотя в моих примерах я использую синтаксис, который работает для встраивания HTML, для включения примеров в качестве изображения в StackOverflow я вместо этого встраиваю в другой SVG, поэтому мне нужно использовать допустимый синтаксис XML)

365
Brian Campbell

Вы хотите сделать преобразование как таковое:

с помощью JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

С помощью CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Оберните свою страницу SVG в тег Group как таковой и нацелите его на манипулирование всей страницей:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Примечание : Шкала 1.0 составляет 100%

17
Gary Hayes

После примерно 48 часов исследований я в итоге сделал это, чтобы получить пропорциональное масштабирование:

ПРИМЕЧАНИЕ. Этот пример написан с использованием React. Если вы его не используете, измените материал дела верблюда на дефисы (т. Е. Измените backgroundColor на background-color и измените стиль Object обратно на String).

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

Вот что происходит в приведенном выше примере кода:

VIEWBOX

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

min-x, min-y, ширина и высота

т.е.: viewbox = "0 0 1000 1000"

Viewbox является важным атрибутом, потому что он в основном говорит SVG, какой размер рисовать и где. Если вы использовали CSS для создания SVG 1000x1000 px, но ваш viewbox был 2000x2000, вы увидите верхний левый квартал вашего SVG.

Первые два числа, min-x и min-y, определяют, следует ли смещать SVG внутри окна просмотра.

Мой SVG должен сдвигаться вверх/вниз или влево/вправо

Изучите это: viewbox = "50 50 450 450"

Первые два числа сместят ваш SVG влево на 50px и выше на 50px, а вторые два числа - это размер окна просмотра: 450x450 px. Если ваш SVG имеет размер 500x500, но на нем есть дополнительные отступы, вы можете манипулировать этими числами, чтобы перемещать их внутри «окна просмотра».

Ваша цель на данный момент состоит в том, чтобы изменить один из этих номеров и посмотреть, что произойдет.

Вы также можете полностью опустить окно просмотра, но тогда ваш пробег будет варьироваться в зависимости от всех других настроек, которые у вас есть в данный момент. По моему опыту, вы столкнетесь с проблемами с сохранением соотношения сторон, потому что окно просмотра помогает определить соотношение сторон.

СОХРАНИТЬ АСПЕКТ

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Основываясь на моих исследованиях, существует множество различных настроек соотношения сторон, но по умолчанию это xMidYMid meet. Я положил это на себя, чтобы явно напомнить себе. xMidYMid meet пропорционально масштабирует его в зависимости от средней точки X и Y. Это означает, что он остается в центре окна просмотра.

WIDTH

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

Посмотрите на мой пример кода выше. Обратите внимание, как я установил только ширину, а не высоту. Я установил его на 100%, чтобы он заполнил контейнер, в котором он находится. Это, вероятно, больше всего способствует ответу на этот вопрос переполнения стека.

Вы можете изменить его на любое значение пикселя, которое хотите, но я бы рекомендовал использовать 100%, как я, чтобы увеличить его до максимального размера, а затем управлять им с помощью CSS через родительский контейнер. Я рекомендую это, потому что вы получите «правильный» контроль. Вы можете использовать медиа-запросы, и вы можете контролировать размер без сумасшедшего JavaScript.

Масштабирование с помощью CSS

Посмотрите на мой пример кода выше снова. Обратите внимание, как у меня есть эти свойства:

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

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

Мы оставляем высоту в одиночестве и/или устанавливаем ее на авто, и мы контролируем изменение размера по ширине. Я выбрал ширину, потому что это часто более значимо из-за отзывчивых проектов.

Вот изображение этих настроек используется:

 enter image description here

Если вы прочитали все решения в этом вопросе и все еще не понимаете, что вам нужно, перейдите по этой ссылке здесь. Я нашел это очень полезным:

https://css-tricks.com/scale-svg/

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

15
agm1984

Пошарил и обнаружил, что этот CSS, кажется, содержит SVG в браузере Chrome вплоть до того момента, когда контейнер больше, чем изображение:

div.inserted-svg-logo svg { max-width:100%; }

Также, похоже, работает в FF + IE 11.

11
Kerry7777

Настройка атрибута currentScale работает в IE (я тестировал с IE 11), но не в Chrome.

0
Fabian Madurai