css - HTML/CSS/SVG 按钮不可点击。

Question

<a class="round-button2" href="index.html" >
<img src="images/Palette.svg" alt="Palette" />
</a> 
<a class="round-button3" href="index2.html" >
<img src="images/Chef.svg" alt="Chef" />    
</a>

https://drive.google.com/open?id=1496aL5TpiqSO4pIh81wkq41Gn02OppE1是svgs的链接 https://codeitdown.com/css-round-buttons/是我遵循的教程；我知道这是一篇 4 年前的文章；它可能已经过时了。我希望社区能够提供帮助。

我可以让 svgs/circles 出现，但它们不能点击我需要它们去的索引链接。我是新手编码器/html 用户。我在 Adob​​e Dreamweaver 中运行了它。

CSS/样式

.round-button2 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button2:hover #shape{
background: #262626;
}
.round-button2 img {
display: block;
width: 90%;
padding: 20%;
height: auto;
}
    
.round-button3 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button3:hover #shape{
background: #262626;
}
.round-button3 img {
display: block;
width: 90%;
padding-bottom: 15%;
padding-left: 20%;
padding-right: 12%;
padding-top: 20%;
height: auto;
}

Answer 1

将 width 更改为 max-width 70%; 并使用 img 类。 和 a 类需要正确的宽度和高度才能被点击。 检查此 fiddle (基于您的代码和该指南)。

http://jsfiddle.net/maxofpower/Jyjjx/13886/

.round-button {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    overflow: hidden;
    background: #464646;
    box-shadow: 0 0 3px gray;
}
.round-button:hover {
    background: #262626;
}
.round-button img {
    display: block;
    width: 76%;
    padding: 12%;
    height: auto;
}

.round-button2 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button2:hover #shape{
background-color: #262626;
}

.round-button2 img{
display: block;
max-width: 70%;
height: auto;
padding:5px 8px 0;
}
.round-button3 img 
{
  display: block;
max-width: 70%;
height: auto;
padding:10px ;
}
.round-button3 {
width: 6%;
height: 0;
padding-bottom: 6%;
border-radius: 50%;
border: 2px solid #f5f5f5;
overflow: hidden;
position: relative;
background: #464646;
box-shadow: 0 0 3px gray;
}
.round-button3:hover #shape{
background: #262626;
}

<div class="round-button">
    <a href="http://example.com">
        <img src="http://codeitdown.com/media/Home_Icon.svg" alt="Home" />
    </a>
</div>
<div class="round-button2">
<a   href="index2.html" >
<img id=shape src="https://svgur.com/i/8as.svg" alt="pallete" />    
</a>
</div>

<div class="round-button3">
<a   href="index2.html" >
<img id=shape src="https://svgur.com/i/8bu.svg" alt="Chef" />    
</a>
</div>