Css 如何在正方形中创建SVG 4试验

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

我试图用stroke dasharray和stroke dashoffset属性实现这一点，但我做不到

例如：

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>

你好

如果你用

100%

定义

宽度
和
高度
的
，这将很难实现。如果您改为使用矩形的特定尺寸（例如100 x 50）并使用适当的
视图框
，则查找适当的破折号图案会容易得多

因为SVG有一个
视图框
，并且我们指定了
preserveAspectRatio=“none”
，所以它将拉伸以适合按钮

如何定义dasharray

我们的矩形宽度为100，高度为50。我要把角片的“腿”做成10个

矩形元素的破折号数组从左上角开始，顺时针进行。
因此，矩形顶部和底部的破折号图案为：

== 10 ==           80           == 10 ==   

左右两边都是

== 10 ==       30       == 10 ==

（当然垂直方向除外）

除左上角外的三个角可以连接在一起，因为它们围绕角流动。因此，我们的仪表板阵列变成：

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

30                                   30

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

给出一个最后的
行程数组：108020020010

演示


@导入url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
*：之后，*：之前{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html{
身高：100%；
}
身体{
身高：100%；
溢出：隐藏；
填充：0；
保证金：0；
背景色：#333；
填充顶部：50px；
}
.行{
宽度：700px；
保证金：0自动；
溢出：隐藏；
}
上校{
浮动：左；
宽度：33.33333%；
文本对齐：居中；
}
.按钮{
位置：相对位置；
高度：50px；
填充：0 10px；
宽度：180px；
字体系列：“Roboto”，无衬线；
文本转换：大写；
显示：内联块；
光标：指针；
}
.按钮.形状{
行程数组：1080200200100；
}
.按钮svg{
位置：相对位置；
z指数：1；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
z指数：0；
}
.按钮.内容{
颜色：#2980b9；
线高：50px；
文本对齐：居中；
z指数：2；
位置：相对位置；
垂直对齐：中间对齐；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-webkit过渡：所有0.4s易入易出；
过渡：所有0.4缓进缓出；
}
.按钮：悬停.content{
颜色：#e74c3c；
}
.按钮：悬停.形状{
行程：#000；
}
.按钮.形状{
填充：透明；
冲程：#fff；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-webkit过渡：所有0.4s易入易出；
过渡：所有0.4缓进缓出；
笔划宽度：6px；
}

你好
通过创造性地使用剪裁和相对单位，您可以达到以下目的：

对于从拐角处开始的给定笔划长度，在剪辑路径（定义为百分比）的每个拐角处放置一个高度和宽度为该高度和宽度两倍的
，然后按笔划长度向上和向左平移剪辑路径

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


@导入url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
身体{
背景色：#333；
填充：50px；
}
.按钮{
位置：相对位置；
高度：50px；
填充：0 10px；
宽度：180px；
字体系列：“Roboto”，无衬线；
文本转换：大写；
显示：内联块；
光标：指针；
}
.按钮svg{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：0；
}
.按钮.内容{
颜色：#2980b9；
线高：50px；
文本对齐：居中；
z指数：2；
位置：相对位置；
垂直对齐：中间对齐；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-webkit过渡：所有0.4s易入易出；
过渡：所有0.4缓进缓出；
}
.按钮：悬停.content{
颜色：#e74c3c；
}
.按钮：悬停.形状{
行程：#000；
}
.按钮.形状{
填充：透明；
冲程：#fff；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
-webkit过渡：所有0.4s易入易出；
过渡：所有0.4缓进缓出；
笔划宽度：6px；
}

你好