主页 / 问题 / 1050748
Accepted
Air
Asked:2020-11-26 15:12:27 +0800 CST2020-11-26 15:12:27 +0800 CST

动画时如何圆角汉堡图标

  • 772

有这样一个例子：

document.querySelector('#svg').addEventListener('click', function() {
  [...document.querySelectorAll('.line')].forEach(s => {
    s.classList.contains('path-line') ?
      s.classList.remove('path-line') :
      s.classList.add('path-line');
  })
})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #272727;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  background-color: black;
}

#path_line_3 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_1 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2.path-line {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 0;
}

#path_line_3.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}

#path_line_1.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}
<svg id="svg" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 50 50">
        <path id="path_line_1" class="line" d="M 10 10, 40 10, 10 40" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_2" class="line" d="M 25 25, 40 25" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_3" class="line" d="M 10 40, 40 40, 10 10" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />
        
    </svg>

是否可以将下图中标记的尖角修圆。

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    我没有立即明白要点击什么。

    SVG中线段连接的设计，由属性负责stroke-linejoin；它可以取与stroke-linecap你已经使用过的值相同的值：\u200b\u200bas：

    bevel| miter|round

    会帮助你 stroke-linejoin="round"

    document.querySelector('#svg').addEventListener('click', function() {
  [...document.querySelectorAll('.line')].forEach(s => {
    s.classList.contains('path-line') ?
      s.classList.remove('path-line') :
      s.classList.add('path-line');
  })
})
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #272727;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  background-color: black;
}

#path_line_3 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_1 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2.path-line {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 0;
}

#path_line_3.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}

#path_line_1.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}
    <svg id="svg" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 50 50">
        <path id="path_line_1" class="line" d="M 10 10, 40 10, 10 40" stroke-linecap="round"  stroke-linejoin="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_2" class="line" d="M 25 25, 40 25" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3"  stroke-linejoin="round"/>

        <path id="path_line_3" class="line" d="M 10 40, 40 40, 10 10" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3"  stroke-linejoin="round" />
        
    </svg>

    • 6

相关问题