主页 / 问题 / 797267
Accepted
Alexandr_TT
Asked:2020-03-13 03:06:27 +0000 UTC2020-03-13 03:06:27 +0000 UTC

按钮 svg 内的变形图标

  • 772

使用平滑变形的主题会很有趣，即在 svg 按钮中将一个图形的轮廓更改为另一个图形的轮廓。
接下来是设计。在初始状态下，该按钮有一个图标 - 左侧有一个黄色星形和“保存”字样

在此处输入图像描述

当您单击按钮时，星号会平滑地变为绿色复选框，并且“保存”字样变为“已保存！”字样。

在此处输入图像描述

很明显，平滑变形是通过将一个图形的节点坐标更改为另一个图形节点的坐标来实现的。我知道，为了实现这一点，必须满足主要条件——两种形状中的锚点数量必须相同。路径（补丁）不应该有中断。

星形图标示例

<svg width="194.6" height="185.1" viewBox="0 0 194.6 185.1">
  <path fill="#FFD41D" d="M97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"/>
</svg>

复选框图标示例

<svg width="194.6" height="185.1" viewBox="0 0 194.6 185.1"> 
  <path d="M110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 
  	71.1,116.7" fill="yellowgreen"/> 
</svg>

javascript

2 个回答

  1. 将星号图标变形为复选框的示例。

    开始动画 - 点击图。 

    <svg width="194.6" height="185.1" viewBox="0 0 194.6 185.1">
  <path fill="#FFD41D" d="M97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
    <animate id="anCheck" begin="click" fill="freeze" attributeName="d" dur="1s" from="M97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"  to="M110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6  71.1,116.7"/>
    <animate id="anGreen" begin="anCheck.end" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>
  </path> 
</svg>

    动画是通过平滑更改补丁的“d”属性中的锚点的坐标来实现的。

    颜色变化动画由命令执行：

    <animate id="anGreen" begin="anCheck.end" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>

    剩下的就是编写CSS按钮样式的规则和JS通过添加、删除类和运行动画来切换按钮状态的脚本。

    开始动画 - 点击图。 

    var icon = document.getElementById("button"),
  buttonText = document.getElementById("btnText"),
  animationToStar = document.getElementById("anStar"),
  animationToCheck = document.getElementById("anCheck"),
  animationToYellow = document.getElementById("anYellow"),
  animationToGreen = document.getElementById("anGreen");

button.addEventListener('click', function() {

  if (button.classList.contains("keep")) {
    button.classList.remove("keep");
    animationToStar.beginElement();
    animationToYellow.beginElement();
    buttonText.innerHTML = "Сохранить";
  } else {
    buttonText.innerHTML = "Сохранено!";
    button.classList.add("keep");
    animationToCheck.beginElement();
    animationToGreen.beginElement();

  }

}, false);
    button {
  border: 0;
  background: -webkit-linear-gradient( top, #444, #111);
  background: linear-gradient( to bottom, #444, #111);
  border-radius: 20px;
  padding: 10px 30px 12px;
  outline: 0;
  display: inline-block;
  width: 235px;
  text-align: left;
}

button:hover,
button:active {
  background: black;
}

button svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

button span {
  font-size: 22px;
  position: relative;
  top: 4px;
  color: white;
}

body {
  padding: 20px;
  text-align: center;
}
    <button id="button">
<svg viewBox="0 0 194.6 185.1">
  <polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
  	67.2,60.9">
    <animate id="anCheck" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 
  	71.1,116.7"/>
    <animate id="anGreen" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>
    <animate id="anStar" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
  	67.2,60.9"/>
    <animate id="anYellow" begin="indefinite" fill="freeze" attributeName="fill" dur="500ms" to="#FFD41D"></animate>
  </polygon>
</svg>
<span id="btnText">Сохранить</span>
</button>

    • 12
  2. Best Answer

    一个小答案不是关于这个问题的，而是关于 svg 的更一般的回答。

    出于某种原因，开发人员不屑于用手绘画并通常触摸它（好像他们害怕在笔记本中看到 jpg 一样）。这甚至适用于非常大的公司。

    让我们看看RBC的标志（链接）

    它看起来像什么以及如何完成：

    <?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Group 3</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo_mob_outline" transform="translate(-25.000000, -140.000000)">
            <g id="Group-3" transform="translate(25.000000, 140.000000)">
                <polygon id="Fill-1" fill="#92CFAE" points="0 0.0390594602 0 19.3656226 19.3265632 0.0390594602"></polygon>
                <polygon id="Fill-2" fill="#2A8288" points="1.69531256 21.0609352 21.0218757 21.0609352 21.0218757 1.73437202"></polygon>
            </g>
        </g>
    </g>
</svg>

<svg width="22px" height="22px" viewBox="0 0 22 22">
  <polygon points="0 19 19 0 0 0" fill="#92CFAE"></polygon>
  <polygon points="1 21 21 1 21 21" fill="#2A8288"></polygon>
</svg>
    我是用肉眼做的，也许我错过了一点，但底线是它在外面是一个正方形，不是整数的点会在所谓的光滑边缘上产生令人不快的凹凸。例如在Yandex logo中，还有额外的组，带有额外的属性，点后面是一堆数字（而且实际上永远不会超过一个字符，没有人会注意到区别）

    好吧，回到我们的复选框星。自己画没什么难的，不比在笼子里的笔记本里画更难：

    <svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="
    0 75,
    75 75,
    100 0,
    125 75,
    200 75,
    140 120,
    166 200,
    100 150,
    34 200,
    60 120" fill="#FF6633"/>
</svg>
    为方便起见，您可以将每个点移至下一行。我在编辑器里画了一颗普通的苏联星星，就像他们在学校画的那样，一行一行。拉直并获得积分。顺便说一句，理论上，对于直线使用 更正确polygon，path因为它意味着可能存在贝塞尔曲线。

    答案中的动画非常笨拙，没有灵魂，动画中间有很强的混乱。我打开编辑器，将一个形状叠加在另一个形状上，看看我如何才能更粗略地制作动画： 在此处输入图像描述

    <svg width="200" height="200" viewBox="0 0 200 200">
  <polygon points="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120" fill="#FF6633">
    <animate begin="click" fill="freeze" attributeName="points" dur="1s" to="35 82 67 120 167 36 193 67 193 67 193 67 114.5 131.5 62 175 62 175 5 108"/>
  </polygon>
</svg>

    var button = document.getElementById("button"),
  buttonText = document.getElementById("btnText"),
  animationToStar = document.getElementById("toStar"),
  animationToCheck = document.getElementById("toCheck");

button.addEventListener('click', function() {

  if (button.classList.contains("keep")) {
    button.classList.remove("keep");
    animationToStar.beginElement();
    buttonText.innerHTML = "Сохранить";
  } else {
    buttonText.innerHTML = "Сохранено!";
    button.classList.add("keep");
    animationToCheck.beginElement();
  }

}, false);
    button {
  border: 0;
  background: linear-gradient( to bottom, #444, #111);
  border-radius: 20px;
  padding: 10px 30px 12px;
  width: 235px;
  outline: 0;
  display: inline-block;
  text-align: left;
}

button:hover,
button:active {
  background: black;
}

button svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

button span {
  font-size: 22px;
  position: relative;
  top: 4px;
  color: white;
}

body {
  padding: 20px;
  text-align: center;
}
    <button id="button">
  <svg viewBox="0 0 200 200">
    <polygon points="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120" fill="#FF6633">
        <animate id="toCheck" fill="freeze" attributeName="points" dur="500ms" begin="indefinite" d="toCheck"
          to="35 82 67 120 167 36 193 67 193 67 193 67 114.5 131.5 62 175 62 175 5 108"
        />
        <animate id="toStar" fill="freeze" attributeName="points" dur="500ms" begin="indefinite" d="toStar"
          to="0 75 75 75 100 0 125 75 200 75 140 120 166 200 100 150 34 200 60 120"
        />
        <animate fill="freeze" dur="500ms" to="#EEDD00" attributeName="fill" begin="toCheck.begin"/>
        <animate fill="freeze" dur="500ms" to="#FF6633" attributeName="fill" begin="toStar.begin"/>
     </polygon>
  </svg>
  <span id="btnText">Сохранить</span>
</button>

    我们从答案中插入示例，我们看看 svg 中可以改进的地方。原则上一切都井井有条，只有在形状动画开始时可以直接在svg中启动彩色动画，这会抛出一点额外的js。

    • 6

相关问题