使带有SVG动画的按钮响应

Question

我正在处理一个带有几个按钮的标题，这些按钮包括动画悬停效果。当以全尺寸观看时，它们看起来很好，但当屏幕变小时，它会完全扭曲并破坏效果。

有没有一种方法可以让整个div和其中的所有内容按比例缩放？

.svg-wrapper {
margin-top: 0;
position: relative;
display: inline-block;
border-radius: 3px;
align: center;
}
#shape {
align-content: center;
stroke-width: 6px;
fill: transparent;
stroke: #fb9715;
stroke-dasharray: 85 400;
stroke-dashoffset: -220;
transition: 1s all ease;
}
#text {
margin-top: -42px;
text-align: center;
color: black;
}
a {
color: black;
font-size: 8pt;
}
.svg-wrapper:hover #shape {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #fb9715;
}

<div class="svg-wrapper" style="white-space:nowrap;">
<div align="center">
<svg xmlns="http://www.w3.org/2000/svg" width="147px">
<rect id="shape" height="100%" width="100%" />
<div id="text" align="center">
<p>
<a href=""><span class="spot">BLOG</span></a>
</p>
</div>
</div>
</div>

Answer 1

您的代码中存在一些错误：

在svg元素中，不能使用html标记。

对于文本，您可以使用<text>在SVG中有一个<a>标记，因此您可以使用此标记。

为了使文本居中，您可以使用text-anchor="middle"并将x矩阵设置在中心。

如果你想让它响应，你需要给svg一个viewBox属性，而不是宽度和高度。通过这种方式，svg元素将占用所有可用的宽度。

svg{width:90vh;}
#shape {
pointer-events: all;
stroke-dasharray: 85 400;
stroke-dashoffset: -220;
transition: 1s all ease;
}
#shape:hover {
stroke-dasharray: 50 0;
stroke-dashoffset: 0;
}

<div class="svg-wrapper" style="white-space:nowrap;">
<div>
<svg viewBox="0 0 150 150" >
<rect id="shape" x="2" y="2" width="146" height="146" fill="none" stroke="#fb9715" stroke-width="3" />
<a href="#" class="spot">
<text id="text" text-anchor="middle" x="75" y="130">
BLOG
</text></a>
</svg>
</div>
</div>