Я хотел бы содержать логотип страницы и навигацию в том же контейнере заголовка - логотип слева, навигационный контейнер справа. Как сделать встроенный встроенный встроенный встроенный встроенный логотип 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;
...
}
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 влияет на выход. Надеюсь, это поможет.
100%
и обернуть его в div
, задавая обертку в процентах ширины. Скрипка Попробуйте перетащить эту ширину окна вокруг ... Если вы назначите ширину в EMS, вы получите фиксированный размер; если вы хотите, чтобы он был отзывчивым, вам нужно будет использовать процент.
Вы действительно можете масштабировать изображение svg с помощью css, взгляните на эту страницу, где это хорошо объясняется многими примерами. http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php