在 svg 中的多边形上添加按钮答案

【问题标题】：Add button on polygon in svg在 svg 中的多边形上添加按钮
【发布时间】：2020-08-15 14:01:03
【问题描述】：

我有 svg 作为底部，我想在底部有一个按钮。

并做出响应。

我想要实现的是：

是否可以使用 css，我该如何实现？

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}

	<div class="container">
	<svg viewBox="0 0 40 100" preserveAspectRatio="none">
		<polygon points="0,0 40,0 40,100 0,80" />
	</svg>
</div>

【问题讨论】：

如果它应该是响应式的，不要使用绝对位置
我已经添加了答案。请检查。

标签： html css svg responsive-design

【解决方案1】：

请检查这个答案：

codepen:- https://codepen.io/Rishab2019/pen/LYpzxKw

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}

#t1{
  position:inherit;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:400px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}

.mybutton{
  color:white;
  background-color:#e6c619;
  border:none;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  border-radius:20px;
  width:160px;
  height:40px;
  margin-left:30%;
  margin-top:405px;
  cursor:pointer;
  box-shadow: 0 2px 5px 0px grey;
  -moz-box-shadow: 0 2px 5px 0px grey;
  -webkit-box-shadow: 0 2px 5px 0px grey;
}



@media all and (max-width:768px){
  
  .mybutton{
    width:140px;
    margin-top:411px;
    
  }
  
}


@media all and (min-width:620px) and (max-width:940px){
#t1{
  position:relative;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}


@media all and (max-width:619px){
#t1{
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}

<div class="container">

	<svg viewBox="0 0 40 100" preserveAspectRatio="none">
		<polygon points="0,0 40,0 40,100 0,80" />
    </svg>

</div>
<button class="mybutton">LOGIN</button>
  <div id="t1">Some Text</div>
  <div id="t2">Some Text</div>
  <div id="t3">Some Text</div>
  <div id="t4">Some Text</div>
  <div id="t5">Some Text</div>
  <div id="t6">Some Text</div>

而且反应灵敏。

【讨论】：

在我的情况下它没有响应，因为我在容器上有一些文本，而这个 svg 用作背景图像，我想在该行添加这个按钮。
我添加了新图片。
这不是响应式的，因为文本会变长。
您可以使用@media 查询使其变小。这意味着，当您减小 screen 、 size 时，字体大小也会减小。
我的问题是您添加的边距。我认为这不是一个好方法。