如何在正方形中创建 SVG 4 三角形

Question

我需要创建一个 svg 形状，具有这种外观：

我正在尝试使用属性 stroke-dasharray 和 stroke-dashoffset 来实现这一点，但我做不到。

例子：

http://jsfiddle.net/L9y6Ld97/

CSS：

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #333;
  padding-top: 50px;
}

.row {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.col {
  float: left;
  width: 33.33333%;
  text-align: center;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button .shape {
  stroke-dasharray: 45, 180px;
  stroke-dashoffset: 18px;
}

.button svg {
  position: relative;
  z-index: 1;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

HTML：

<div class='row'>
  <div class='col'>
    <div class='button'>
      <svg xmlns='http://www.w3.org/2000/svg'>
        <rect class='shape' height='100%' width='100%'></rect>
      </svg>
      <div class='content'>Hello</div>
    </div>
  </div>
</div>

Answer 1

如果你用100% 为width 和height 定义<rect>，这将很难实现。如果您改为使用特定大小的矩形（例如 100 x 50）并使用适当的viewBox，则找到适当的破折号模式会容易得多。

因为 SVG 有一个viewBox，并且我们指定了preserveAspectRatio="none"，所以它会拉伸以适应按钮。

dasharray 是如何定义的

我们的矩形有 100 的宽度和 50 的高度。我要将角件的“腿”设为 10。

矩形元素的虚线数组从左上角开始，顺时针方向排列。 因此，矩形顶部和底部的虚线图案是：

== 10 ==           80           == 10 ==   

左右两边是

== 10 ==       30       == 10 ==

（当然垂直除外）

除了左上角之外的三个角可以连接在一起，因为它们围绕角流动。所以我们的破折号数组变成了：

     10            80                20
    +---                        ---+
10  |                              |

30                                   30

    |                              |
    +---                        ---+
 20                                  20

给最后一个stroke-dasharray: 10 80 20 30 20 80 20 30 10 0;

演示

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #333;
  padding-top: 50px;
}

.row {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.col {
  float: left;
  width: 33.33333%;
  text-align: center;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button .shape {
  stroke-dasharray: 10 80 20 30 20 80 20 30 10 0;
}

.button svg {
  position: relative;
  z-index: 1;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

    <div class='row'>
      <div class='col'>
        <div class='button'>
          <svg viewBox="0 0 100 50" preserveAspectRatio="none">
            <rect class='shape' height='50' width='100'></rect>
          </svg>
          <div class='content'>Hello</div>
        </div>
      </div>
    </div>

Answer 2

稍微创造性地使用剪裁和相对单位，您就可以做到：

对于从角开始的给定笔划长度，将其原点的高度和宽度加倍的<rect> 放置在剪辑路径的每个角落（定义为百分比），然后将剪辑路径向上和向左平移笔划长度。

垂直和水平长度可以独立定义。

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
  background-color: #333;
  padding: 50px;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.button svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

<div class='button'>
  <svg xmlns='http://www.w3.org/2000/svg'>
    <clipPath id="clip" clipPathUnits="userSpaceOnUse" transform="translate(-20, -15)">
      <rect x="0" y="0" width="40" height="30" />
      <rect x="100%" y="0" width="40" height="30" />
      <rect x="100%" y="100%" width="40" height="30" />
      <rect x="0" y="100%" width="40" height="30" />
    </clipPath>
    <rect clip-path="url(#clip)" class="shape" y="0" x="0" height="100%" width="100%" />
  </svg>
  <div class='content'>Hello</div>
</div>