svg响应式折线_如何构建响应式手工SVG表单

svg响应式折线

在先前的教程中，我向您展示了如何使用flexbox构建响应表单以及如何设置表单元素的样式 。 今天，我们将继续进入“表单”世界的旅程，并学习从头开始创建自适应的手工SVG表单。

这是我们要构建的表单：

1.从页面标记开始

我们将从SVG和一个form元素开始：

<svg style="display:none;">...</svg>
<form class="handmade-form">...</form>

SVG精灵

对于我们的表格，我们将需要一堆手工插图。 令人高兴的是，位于Tuts +的Web设计编辑器Ian Yates为我们创建了一些精美的插图。 谢谢你，伊恩:)

与我们在上一个教程中所做的类似，我们将创建一个SVG精灵并将所有图形嵌入其中。 然后，在表单内部，通过调用use元素，将在需要时渲染目标图标。

这是SVG精灵的标记：

<svg style="display:none;">
  <symbol id="input1" viewBox="0 0 347.11 49.7" preserveAspectRatio="none">...</symbol>
  <symbol id="input2" viewBox="0 0 345.27 56.51" preserveAspectRatio="none">...</symbol>
  <symbol id="input3" viewBox="0 0 344.17 48.76" preserveAspectRatio="none">...</symbol>
  <symbol id="input4" viewBox="0 0 347.13 54.94" preserveAspectRatio="none">...</symbol>
  <symbol id="textarea" viewBox="0 0 704.84 271.56" preserveAspectRatio="none">...</symbol>
  <symbol id="fieldset" viewBox="0 0 998.06 602.62" preserveAspectRatio="none">...</symbol>
  <symbol id="checkbox_empty" viewBox="0 0 33.18 33.34">...</symbol>
  <symbol id="checkmark" viewBox="0 0 37.92 33.3" preserveAspectRatio="none">...</symbol>
  <symbol id="button" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">...</symbol>
</svg>

请注意，我们在大多数插图中preserveAspectRatio="none"了preserveAspectRatio="none"属性。 我们这样做是因为，如我们稍后将看到的，我们的图标将缩放并释放其初始尺寸。

形成

该表格将由标题和无序列表组成。 另外，我们将使用.container为表单设置最大宽度，并将其内容水平居中：

<form class="handmade-form">
  <div class="container">
    <h1>Contact us</h1>
    <ul>
      <li class="grid grid-2">...</li>    
      <li class="grid grid-2">...</li>    
      <li class="form-wrapper">...</li>    
      <li class="form-wrapper">...</li>    
      <li class="grid grid-3">...</li>
    </ul>
  </div>
</form>

如您所见，上面的每个列表项都包含一个或多个类。 另外，出于可读性原因，我们可以创建一个额外的子元素，并将这些类传递给它，如下所示：

<li>
  <div class="grid grid-2">...</div>
</li>

在列表内，我们将放置SVG和表单元素。

第一个列表项将包括两个必填的输入字段及其SVG：

<div class="form-wrapper">
  <input type="text" placeholder="Name*" required> 
  <svg>
    <use xlink:href="#input1"></use>
  </svg>
</div>
<div class="form-wrapper">
  <input type="text" placeholder="Surname*" required>
  <svg>
    <use xlink:href="#input2"></use>
  </svg>
</div>

同样，第二个列表项还将包含两个输入字段及其SVG：

<div class="form-wrapper">
  <input type="email" placeholder="Email*" required> 
  <svg>
    <use xlink:href="#input3"></use>
  </svg>
</div>
<div class="form-wrapper">
  <input type="tel" placeholder="Phone">
  <svg>
    <use xlink:href="#input4"></use>
  </svg>
</div>

在第三个列表项中，我们将放置一个文本区域及其关联的插图：

<textarea placeholder="Message"></textarea>       
<svg>
  <use xlink:href="#textarea"></use>
</svg>

第四个列表项将包括一个fieldset元素。 在其中，我们将放置一个legend元素，一个带有两个单选按钮的列表以及它们的SVG及其相关的SVG：

<fieldset>
  <legend>Select preferred method of contact</legend>
  <ul class="checkbox-list">
    <li>
      <input type="radio" id="email" name="contact-method" checked>
      <label for="email">
        <svg>
          <use xlink:href="#checkbox_empty"></use>
        </svg>
        <svg class="checkmark">
          <use xlink:href="#checkmark"></use>
        </svg>
        By Email
      </label>
    </li>
    <li>
      <input type="radio" id="phone" name="contact-method">
      <label for="phone">
        <svg>
          <use xlink:href="#checkbox_empty"></use>
        </svg>
        <svg class="checkmark">
          <use xlink:href="#checkmark"></use>
        </svg>            
        By Phone
      </label>
    </li>
  </ul>       
  <svg>
    <use xlink:href="#fieldset"></use>
  </svg>
</fieldset>

最后，第五个列表项将包含“提交”和“重置”按钮以及它们的SVG：

<div class="form-wrapper">
  <button type="submit">SUBMIT</button> 
  <svg>
    <use xlink:href="#button"></use>
  </svg>
</div>
<div class="form-wrapper">
  <button type="reset">RESET</button> 
  <svg>
    <use xlink:href="#button"></use>
  </svg>
</div>

2.定义一些基本样式

在仔细研究各个表单元素之前，让我们首先定义一些基本CSS样式。 这些将包括取自Envato Elements的自定义字体，一些自定义变量和一些重置规则：

@font-face {
  font-family: "Summer";
  src: url(SummerFont-Regular.woff);
}

@font-face {
  font-family: "Summer Bold";
  src: url(SummerFont-Bold.woff);
}

:root {
  --white: #fff;
  --red: #e31b23;
}

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  background: none;
  outline: none;
}

[type="radio"] {
  position: absolute;
  left: -9999px;
}

button,
label {
  cursor: pointer;
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

body {
  font: 32px/1.2 "Summer";
  margin: 1.5rem 0;
}

注意 ：为简单起见，在本教程中，我不会遍历所有 CSS规则。 您可以通过单击演示项目的CSS选项卡来检查其余部分。

3.构建表单布局

在小屏幕上，我们所有的表单元素都会堆叠在一起：

但是，在600像素及以上像素的视口中，表单布局将发生变化。 进一步来说：

• 我们将前两行的input s分为两个等宽列。
• 每个按钮将覆盖父行宽度的三分之一。

多亏了CSS Grid，我们可以轻松地构建所需的多列布局。 首先，我们将.handmade-form .grid容器设置为网格。 然后，我们将使用grid-2和grid-3帮助器类来定义网格列的数量：

@media screen and (min-width: 600px) {
  .handmade-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }

  .handmade-form .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .handmade-form .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

所有这些规则都放置在媒体查询中，因此它们仅在600px及以上宽的视口上生效。

4.设置表单元素的样式

整理好结构后，下一步是为所有表单元素指定一些初始的美学样式：

/*CUSTOM VARIABLES HERE*/

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button {
  width: 100%;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form fieldset {
  padding: 15px;
}

.handmade-form textarea {
  height: 200px;
  vertical-align: top;
}

.handmade-form legend {
  padding-top: 15px;
  margin: 0 auto;
}

.handmade-form ::placeholder {
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;
}

.handmade-form button {
  font-family: "Summer Bold";
  color: var(--white);
  padding: 5px 10px;
}

放置插图

本练习的下一个也是最具挑战性的部分是将插图相对于其关联的表单元素定位。 为此，我们将使用position属性。 另一种实现方式可能是将图形设置为背景图像。 但是，我不是这种实现的忠实拥护者，因为它需要额外的操作才能使图像适应各种屏幕。

让我们记下我们的计划：

• SVG将是绝对定位的元素。
• 它们将位于与窗体控件相同的位置，并且具有相同的尺寸。 这就是为什么我们之前将它们的preserveAspectRatio设置为none 。
• 表单控件应具有焦点，因此我们将为其赋予较高的z-index 。

这是此行为所需的样式：

.handmade-form .form-wrapper,
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  position: relative;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  z-index: 1;
}

.handmade-form .form-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5.创建自定义单选按钮

要再次创建自定义单选按钮，我们将利用“ CSS checkbox hack技术”。

如果再次查看标记部分，您会注意到fieldset元素包含.checkbox-list列表。 每个标签内有两个SVG。 第一个描述相关单选按钮的未选中状态，而另一个描述其选中状态。

单选按钮应该放在一行上，因此我们将.checkbox-list转换为flex容器。 另外，我们将绝对将它们相对于标签放置，并为其设置一些固定尺寸（20px x 20px）。

以下是相应的样式：

.handmade-form .checkbox-list {
  display: flex;
  justify-content: center;
}

.handmade-form .checkbox-list li:not(:last-child) {
  margin-right: 50px;
}

.handmade-form .checkbox-list label svg {
  top: 50%;
  left: -25px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

.handmade-form .checkbox-list label .checkmark {
  stroke-dasharray: 233.69552612304688;
  stroke-dashoffset: 233.69552612304688;
  transition: stroke-dashoffset 0.5s linear;
}

.handmade-form [type="radio"]:checked + label .checkmark {
  stroke-dashoffset: 0;
}

注意：即使我已将stroke-*属性附加到父SVG而不是其path ，该效果仍然有效，因为这些属性是继承的。

结论

就是这样，伙计们！ 在本教程中，我们设法从头开始构建了一个响应式手工SVG表单。 我希望这项练习可以帮助您学习新知识，并启发您在即将进行的项目中使用它。

这提醒我们建立了什么：

在即将到来的教程中，我们将更进一步，讨论如何通过将其合并到流行的WordPress联系人表单插件中来使其动态化。 敬请关注！

与往常一样，非常感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-handmade-svg-form--cms-34495

svg响应式折线