Question

如何将此SVG的高度更改为24px并使其在:hover上正常工作？

HTML：

<div class="sv_btn">
  <svg width="100" height="100">
    <line class="top" x1="0" y1="0" x2="600" y2="0" />
    <line class="left" x1="0" y1="100" x2="0" y2="-200" />
    <line class="bottom" x1="100" y1="100" x2="-200" y2="100" />
    <line class="right" x1="100" y1="0" x2="100" y2="600" />
  </svg>
</div>

CSS：

.sv_btn {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 200px;
}    
.sv_btn svg {
  position: absolute;
  top: 0;
  left: 0;
}
.sv_btn line {
  stroke-width: 5;
  stroke: #000;
  fill: none;
  stroke-dasharray: 100px;
  transition: transform .6s;
}
.sv_btn:hover svg line.top {
  transform: translateX(-200px);
}
.sv_btn:hover svg line.bottom {
  transform: translateX(200px);
}
.sv_btn:hover svg line.left {
  transform: translateY(200px);
}
.sv_btn:hover svg line.right {
  transform: translateY(-200px);
}

演示：http://codepen.io/anon/pen/KdPEvr

Answer 1

最简单的方法是更改SVG的第一行，如下所示：

 <svg width="100%" height="100%" viewBox="0 0 100 100">

然后SVG将缩放到<div>的大小。所以你需要做的就是将div设置为24px：

.sv_btn {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 200px;
}

＆＃13;

.sv_btn {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 200px;
}

.sv_btn .text {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  color: whitesmoke;
}

.sv_btn svg {
  position: absolute;
  top: 0;
  left: 0;
}

.sv_btn line {
  stroke-width: 5;
  stroke: #000;
  fill: none;
  stroke-dasharray: 100px;
  transition: transform .6s;
}

.sv_btn:hover svg line.top {
  transform: translateX(-200px);
}

.sv_btn:hover svg line.bottom {
  transform: translateX(200px);
}

.sv_btn:hover svg line.left {
  transform: translateY(200px);
}

.sv_btn:hover svg line.right {
  transform: translateY(-200px);
}

＆＃13;

<div class="sv_btn">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <line class="top" x1="0" y1="0" x2="600" y2="0" />
    <line class="left" x1="0" y1="100" x2="0" y2="-200" />
    <line class="bottom" x1="100" y1="100" x2="-200" y2="100" />
    <line class="right" x1="100" y1="0" x2="100" y2="600" />
  </svg>
</div>

＆＃13;

更新

要将高度更改为24px，并将其挤压以适合，请添加preserveAspectRatio="none"。此外，您可能希望将vector-effect="non-scaling-stroke"添加到路径中，以便线条的笔触宽度也不会受到挤压。

  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" vector-effect="non-scaling-stroke">

＆＃13;

.sv_btn {
  position: relative;
  width: 100px;
  height: 24px;
  margin: 200px;
}

.sv_btn .text {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  color: whitesmoke;
}

.sv_btn svg {
  position: absolute;
  top: 0;
  left: 0;
}

.sv_btn line {
  stroke-width: 5;
  stroke: #000;
  fill: none;
  stroke-dasharray: 100px;
  transition: transform .6s;
}

.sv_btn:hover svg line.top {
  transform: translateX(-200px);
}

.sv_btn:hover svg line.bottom {
  transform: translateX(200px);
}

.sv_btn:hover svg line.left {
  transform: translateY(200px);
}

.sv_btn:hover svg line.right {
  transform: translateY(-200px);
}

＆＃13;

<div class="sv_btn">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <line class="top" x1="0" y1="0" x2="600" y2="0" vector-effect="non-scaling-stroke" />
    <line class="left" x1="0" y1="100" x2="0" y2="-200" vector-effect="non-scaling-stroke" />
    <line class="bottom" x1="100" y1="100" x2="-200" y2="100" vector-effect="non-scaling-stroke" />
    <line class="right" x1="100" y1="0" x2="100" y2="600" vector-effect="non-scaling-stroke" />
  </svg>
</div>

＆＃13;

然而，有弹性的比例会影响线宽，这意味着垂直线现在比水平线更胖。

更新2

如果您不想使用重新缩放方法，可以通过手动调整矩形的垂直边并重新调整某些CSS来更改SVG。

＆＃13;

.sv_btn {
  position: relative;
  width: 100px;
  height: 24px;
  margin: 200px;
}

.sv_btn .text {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  color: whitesmoke;
}

.sv_btn svg {
  position: absolute;
  top: 0;
  left: 0;
}

.sv_btn line {
  stroke-width: 5;
  stroke: #000;
  fill: none;
  transition: transform .6s;
}

.sv_btn svg line.top,
.sv_btn:hover svg line.bottom {
  stroke-dasharray: 100px;
}

.sv_btn:hover svg line.top {
  transform: translateX(-200px);
}

.sv_btn:hover svg line.bottom {
  transform: translateX(200px);
}

.sv_btn svg line.left,
.sv_btn svg line.right {
  stroke-dasharray: 24px;
}

.sv_btn:hover svg line.left {
  stroke-dasharray: 24px;
  transform: translateY(48px);
}

.sv_btn:hover svg line.right {
  stroke-dasharray: 24px;
  transform: translateY(-48px);
}

＆＃13;

<div class="sv_btn">
  <svg width="100" height="24">
    <line class="top" x1="0" y1="0" x2="600" y2="0" />
    <line class="left" x1="0" y1="24" x2="0" y2="-48" />
    <line class="bottom" x1="100" y1="24" x2="-200" y2="24" />
    <line class="right" x1="100" y1="0" x2="100" y2="144" />
  </svg>
</div>

＆＃13;

SVG线动画2

1 个答案:

更新

更新2