Question

我正在使用SVG创建一个带圆角的按钮（我必须使用SVG）。

所以我成功地使它与他的父元素#btnTour有关的响应，我把它放在宽度和高度上。但是我总是在这个#btnTour和我的SVG的路径之间有一个差距，我认为它与视图框有关，但在阅读了大量关于它的文章后，我仍然无法弄清楚如何解决我的问题。

感谢您的帮助。

＆＃13;

#btnTour{
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  position: relative;
  margin: 1em;
  padding: 0;
  width: 192px; 
  height: 70px;
  text-decoration: none;
}

#svgContainer{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  border: dotted 1px red;
 }

#btnTourText{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  margin: 0;
  text-align: center;
  z-index: 100;
  font-size: 25px;
  color: #2b5e9d;
  font-weight: 600;
  white-space: nowrap;
}

＆＃13;

<a id="btnTour" href="page2.php">

	<div id="svgContainer">

    	<svg width="100%" height="100%" viewBox="0 0 300 125" preserveAspectRatio="none">

        	<path id="svgBtn" style="fill:none;stroke:#2b5e9d;stroke-width:2;"  d="M286.5,62.5C286.5,90.39099999999999,263.891,113,236,113C236,113,171.64499999999998,113,150,113C128.355,113,64,113,64,113C36.109,113,13.5,90.39099999999999,13.5,62.5C13.5,62.5,13.5,62.5,13.5,62.5C13.5,34.609,36.109,12,64,12C64,12,128.35500000000002,12,150,12C171.645,12,236,12,236,12C263.891,12,286.5,34.609,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5C286.5,62.5,286.5,62.5,286.5,62.5"></path>         

    	</svg>

	</div>

	<p id="btnTourText">Go on a Tour</p>
</a>

＆＃13;

Answer 1

是的，您必须设置视图框以适合路径（例如viewBox="12.5 11 275 103"之类的东西）;你可以通过js编程（计算边界框到适合的svg元素）或从你喜欢的svg创作应用程序设置/获取它...

SVG响应按钮的ViewBox问题

1 个答案: