如何制作具有纵横比的响应式 SVG/CSS 背景
Posted
技术标签:
【中文标题】如何制作具有纵横比的响应式 SVG/CSS 背景【英文标题】：How to make responsive SVG/CSS background with aspect ratio 【发布时间】：2022-01-18 22:09:54 【问题描述】：我的标题位置是relative，我有一个absolute SVG 图像，在徽标旁边带有倾斜边缘（一侧梯形）。
徽标区域应固定为450px，并且 svg 图像应以响应宽度拉伸（不改变 SVG 的角度）。
这是我正在寻找的概念： （灰色部分是我的 SVG）
<html lang="fa" dir="rtl">
<body>
<header>
<svg viewBox="0 0 2000 100" >
<polygon points="0,0 2000,0 1950,100 0,100 z" fill="navy" />
</svg>
<div class="container">
<div class="logo-area">
<img scr="logo.png" class="logo"/>
</div>
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
header
position: relative;
header svg
position: absolute;
left: 0;
top: 0;
header .logo-area
width: 450px;
header .logo
text-align: right;
@media (min-width: 1024px)
.container
max-width: 1024px;
@media (min-width: 1366px)
.container
max-width: 1366px;
.container
margin-right: auto;
margin-left: auto;
header .container nav
text-align: left;
float: left;
direction: ltr
如何使用 CSS 实现？
【问题讨论】：
可能你需要使用preserveAspectRatio="xMaxYMid slice"。如果这对您没有帮助，请考虑使用更多详细信息编辑您的问题。代码会很好。
那么，SVG 是否应该随宽度缩放（角度除外...）？还是 SVG 左侧或右侧消失的“滑动门”效果？
@chrwahl 是的，它是一个静态 SVG 背景，我只想缩放看起来像网格 css。没有任何滑动或类似的东西。
@enxaneta 我更新了图片并插入了代码。
【参考方案1】：
这里的深蓝色 SVG 的宽度为 5000 像素。它位于右侧 100 像素处，并且标题的溢出被隐藏。因此，部分/大部分 SVG 隐藏在左侧。徽标图像也绝对位于右侧。
（图片也是 SVG，但在 <img> 中）
header
position: relative;
height: 100px;
overflow: hidden;
header svg
position: absolute;
right: 100px;
header img
position: absolute;
right: 0;
header nav
position: relative;
color: white;
@media (min-width: 1024px)
header
max-width: 1024px;
@media (min-width: 1366px)
header
max-width: 1366px;
<header>
<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdHRlcm4gaWQ9InAxIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHdpZHRoPSIxJSIgaGVpZ2h0PSIzJSI+CjxjaXJjbGUgcj0iNSIgY3g9IjUiIGN5PSI1IiBmaWxsPSJuYXZ5Ii8+CjwvcGF0dGVybj4KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjcDEpIi8+Cjwvc3ZnPg=="
/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 100" >
<polygon points="0,0 5000,0 4950,100 0,100 z" fill="navy" />
</svg>
<nav>
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</header>【讨论】：
谢谢，很好。但是大于 2000px 的屏幕呢？我们可以将svg宽度设置为最终吗？还是可以从svg的左侧重复？ 想将内容放入.container。我更新了图像并插入了代码。
@FredII 我更新了我的答案以适合您的问题和代码。现在 SVG 的宽度为 5000 像素——它可以根据需要进行扩展。关于.container。在我的示例中，我认为不需要它。我们有徽标、SVG 和 <nav>，然后媒体查询控制的是 <header> 的宽度。
谢谢，但我有一个问题，我在 html 标签中使用了 rtl 元数据。当我将margin: 0 auto 应用到我的header 时，它的左侧有空白区域（在 +1366px 屏幕上）并且不会填满屏幕。当我设置 overflow: visible 时，它会将 y-scroll 附加到屏幕上。这是我的代码，你可以看到：jsfiddle.net/Gamecock/cdzjx2qp/18
我认为它看起来不错。希望您在任何宽度的左侧和右侧都应该有相等的空间。如果您希望标题转到边缘，您可以添加body margin:0。但无论如何：您可能在页面上有更多内容 - 让父元素或主体控制页面的宽度，然后标题与其余内容一起只是一个子元素。使用弹性框或网格布局来控制页面的整体布局。以上是关于如何制作具有纵横比的响应式 SVG/CSS 背景的主要内容，如果未能解决你的问题，请参考以下文章
在 Canvas 中制作根据纵横比缩小的响应式浏览器窗口 [重复]