Как правильно и быстро масштабировать SVG в HTML5?

0

Я хотел бы содержать логотип страницы и навигацию в том же контейнере заголовка - логотип слева, навигационный контейнер справа. Как сделать встроенный встроенный встроенный встроенный встроенный логотип SVG, чтобы всегда заполнять 100% высоты его контейнера (заголовка) и ширины автомасштабирования - в то же время оставаясь слева от контейнера? (Мне нужен отдельный <div> для упаковки контейнера <svg>?)

Вероятно, мне нужно установить свойство svg viewBox, но я не уверен, как это сделать, чтобы быть уверенным, что он будет реагировать и правильно отображать в разных разрешениях)?

Мой код:

HTML:

<header id="page-header">

    <svg id="logo" 
         xmlns="http://www.w3.org/2000/svg">
         <path d="..."/><g></g>
    </svg>

    <nav id="page-nav">
          <a href="...">...</a>
          ...
    </nav>

</header>

CSS:

#page-header {
    height: 9em;
    padding: 0;
    margin: 0 0 6em 0;
}

#logo {
    padding: 0;
    width:600px;  //not working at all.

    vertical-align:top;
    float:left;

    display:inline-block;
}

#page-nav {
   float:right;
   ...
}
  • 0
    Демо действительно поможет с этим - CodePen и т. Д.
  • 0
    Если вы хотите, чтобы SVG масштабировался, обязательно, чтобы у него был атрибут viewBox.
Показать ещё 1 комментарий
Теги:
svg

2 ответа

0
Лучший ответ

viewBox вы должны установить атрибут viewBox, а затем сделать все ваши измерения в вашем svg относительно этого. Когда вы назначаете height и width (в вашем svg-теге или в вашем css), вы настраиваете размер ограничивающего прямоугольника svg, а не размер элементов внутри него. Установив viewBox вы позволяете браузеру знать, что вы хотите, чтобы изображение содержалось в определенной ограничивающей рамке, а затем, когда вы затем отрегулируете ширину или высоту, он будет соответствующим образом изменен.

viewBox принимает четыре значения, разделенные xywh где x - координата x левой стороны ограничивающего прямоугольника, y - y-координата вершины ограничивающей рамки, а w и h - ширина и высота Ограничительная рамка.

Если вы хотите квадратную ограничительную рамку для своего логотипа, вы можете сделать что-то вроде этого:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- your svg elements -->
</svg>

Тогда все будет иметь размер относительно ограничивающего прямоугольника 100x100, поэтому, если бы вам нужен круг в центре, с той же шириной, что и ограничивающая рамка, вы просто выполните:

<circle cx="50" cy="50" r="50" fill="red"></circle>

Тогда, если вы использовали свой css для создания width: 100%; , ваш круг будет шириной вашего контейнера, а не 50 пикселей.

Здесь сценарий, показывающий, как изменение каждого значения viewBox влияет на выход. Надеюсь, это поможет.

  • 0
    Спасибо за объяснение этого! Но просто чтобы быть уверенным - похоже, что невозможно адаптивно масштабировать изображение svg на разных разрешениях с использованием чистого CSS (а не JavaScript) - указание размера viewBox в ems или ограничение его размера размером его контейнера?
  • 0
    @ Если вы хотите больше контролировать размер, вы можете присвоить ему ширину и высоту 100% и обернуть его в div , задавая обертку в процентах ширины. Скрипка Попробуйте перетащить эту ширину окна вокруг ... Если вы назначите ширину в EMS, вы получите фиксированный размер; если вы хотите, чтобы он был отзывчивым, вам нужно будет использовать процент.
0

Вы действительно можете масштабировать изображение svg с помощью css, взгляните на эту страницу, где это хорошо объясняется многими примерами. http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

  • 0
    Спасибо мужчина, очень полезно! :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню