Question

我必须首先道歉，因为我无法掌握只能被描述为逻辑的东西。我有建议的布局照片。这是一个快照：

布局：

我没有示例代码。这是因为如果我不知道如何处理代码，我就无法编写代码。这让我想到：

我正在尝试设计一个叠加的SVG导航菜单（实现为红色矩形+梯形多边形），该菜单始终位于页面底部，并在单击/触摸时弹出以显示扩展的菜单选项。根据我的阅读和理解，使用绝对（我的意思是“静态”这里？）值来定义位置（像素与百分比）是不好的设计，因为许多设备的分辨率和DPI差别很大。我在W3的Try Me编辑器中尝试了一个简单的例子，以便掌握我将如何定位红色矩形。我用过：

<svg>
   <rect width="100%" height="10%" x="0%" y="90%" style="fill:#ff0000;" />
</svg>

这会在底部放置一个红色矩形，覆盖整个页面宽度（无论分辨率如何），而不会在视口外部剪切矩形。成功！对..？嗯..菜单不只是一个矩形。在汉堡包菜单图标所在的中心将有一个多边形梯形“凹凸”。这导致了我的问题。多边形由坐标定义。坐标是绝对的（还是静态的？）。以像素或英寸或其他各种单位定义。它不支持我读过的百分比，而且我不确定这是我想要的。使用百分比意味着矩形将拉伸以填充视口高度的“10％”。在桌面上，它将比纵向移动更薄。这也意味着多边形不一定是居中的，因为550px并不总是代表50％（示例值）。

我发生了这个错误。帮助我找到布置此页面的正确逻辑。老实说，在此之后，动态加载下面的内容似乎很容易。

仅供参考，我想尽可能避免使用JS和插件。我的意思是，我不想一直使用它们。澄清：如果可以避免。

我非常乐意澄清 广告恶心。虽然这是我第一次积极使用SO，并且之前只是通过谷歌搜索曝光了它。

编辑：我在使用SVG的背景下问，因为这是我在找到适当的文档时遇到的问题。我发现的是博客文章和“下载此代码/插件以实现此效果”，而不是如何实现这些效果的概念性描述。当HTML4和CSS2成为工具时，我编写了网站（个人而非专业）。那时候，你不必担心手机。你可以在常用的分辨率和宽高比（16：9和4：3几乎是它）中工作。但是现在这些设备的像素密度和渲染方法以及2个纵横比（纵向和横向）都有很大变化。我将从相当静态的网页背景转向强大的吗啡'电力网页。

TLDR：如何做SVG？如何将该梯形放在中心，并保持其宽度/高度，而不管视口是什么。另外， 如果我应该避免绝对值（定义矩形的高度，以像素为单位） ，我该如何保持一致的高度和绝对定位的正确位置具有相对值的多边形？

EDIT2： 谢谢Paul！ 这对我帮助很大!!能够看到代码并让它解释了为什么以及它在什么情况下工作或不工作使我能够理解如何使用这种工具。特别是在根据我自己的想法进行解释时。 CSS版本也非常有用。我从来没有使用它超出元素的基本样式。这两个答案都很棒。

Answer 1

您不需要SVG。你想要实现的目标很容易用CSS。

var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");

tabbutton.addEventListener("click", function() {
  tabcontainer.classList.toggle("open");
});

.container
{
  width: 500px;
  height: 500px;
  position: relative;
  background-color: black;
  overflow: hidden;
}

.tabcontainer
{
  position: absolute;
  width: 100%;
  bottom: -44px;
}

.tabcontainer.open
{
  bottom: 0px;
}

.tabbutton
{
  width:100px;
  height: 0;
  margin: 0 auto;
  border-bottom: solid 20px red;
  border-left: solid 16px transparent;
  border-right: solid 16px transparent;
  text-align: center;
  cursor: pointer;
}

.tabbutton I
{
  color: white;
}

.tabbody
{
  width: 100%;
  height: 60px;
  background-color: red;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  
  
  <div class="tabcontainer">
    <div class="tabbutton"><i class="fa fa-bars"></i></div>
    <div class="tabbody"></div>
  </div>
</div>

使用SVG

通常，如果SVG缩放，SVG中的任何内容都会缩放。当人们想要在页面上创建响应式SVG文档时，这可能会导致问题。

但是，通过一些特定的SVG布局，可以执行您想要的操作。特别是当你有简单的设计时，需要坐在角落里，或者在一个边上居中。

以上是上述仅使用CSS的示例的一个版本，它使用SVG作为标签部分。

这是如何工作的我们正在使用的功能，如果内容的宽高比（由viewBox定义）与SVG（由width和{{1}定义）不同}），内容将自动缩放并居中。

所以这里我们定义一个132x20的按钮，并将其放在一个100％x 20的SVG中。这里“100％”是容器/页面的宽度。由于纵横比不同，表示按钮的height将自动水平居中。

<polygon>

var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");

tabbutton.addEventListener("click", function() {
  tabcontainer.classList.toggle("open");
});

.container
{
  width: 100%;
  height: 500px;
  position: relative;
  background-color: black;
  overflow: hidden;
}

.tabcontainer
{
  position: absolute;
  width: 100%;
  bottom: -44px;
}

.tabcontainer.open
{
  bottom: 0px;
}

.tabbutton
{
  fill: red;
  cursor: pointer;
}

.tabbody
{
  fill: red;
}

SVG，静态vs绝对vs相对，坐标

1 个答案: