Использование изображения SVG в качестве кнопки / ссылки

Question

Я немного искал, но не смог разобраться. Я надеялся, что смогу разместить и добавить тег <a> между двумя тегами svg, чтобы создать кнопку, но пока она не работает. Я думал, что делал:

<svg class="triangle-animation" width="85" height="85">
                        <polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/>
                        <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/>
                        <polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/>
<a href="about.html"></a>
                    </svg>

но не повезло. Я также попытался поместить текст внутри тега, но он даже не появился. Руководства, которые я искал, пока не очень помогли. Я новичок в веб-дизайне, и я просто пытаюсь запустить свою личную веб-страницу.

SVG рисует три треугольника друг над другом, указывая вниз. Поведение, которое я ищу, заключается в том, что они притягивают взгляд, а при нажатии страница переходит к основному содержанию. Спасибо за помощь!

Answer 1

вместо этого попробуйте обернуть ваши теги вокруг SVG.

<a href="about.html">
    <svg class="triangle-animation" width="85" height="85">
        <polygon points="0,25 25,50, 50,25" fill="rgba(255,255,255,.1)"/>
        <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(255,255,255,.5)"/>
        <polygon points="0,0 25,25, 50,0" fill="rgba(255,255,255.8)"/>
    </svg>
</a>

Answer 2

Лучшим решением было бы использовать определение символа svg -> look
Вы можете управлять иконками проще.

.icon {
      width: 50px;
      height: 50px;
    }

    .animation {
      display: flex;
    }

    .mail {
      background-color: #dc4e41;
      fill: #fff;
    }

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="triangle-animation" viewBox="0 0 50 50">
      <path fill="rgba(255,0,0,.3)" d="M0 25l25 25 25-25z" />
      <path fill="rgba(0,255,255,.5)" d="M0 12.5l25 25 25-25z" />
      <path fill="rgba(255,0,255,.8)" d="M0 0l25 25L50 0z" />
    </symbol>
    <symbol id="share-icon-mail" viewBox="-7 -6 42 42">
      <path
        d="M26 23.5v-12a8.408 8.408 0 0 1-1.078 1.031c-2.234 1.719-4.484 3.469-6.656 5.281-1.172.984-2.625 2.188-4.25 2.188h-.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281A8.411 8.411 0 0 1 2.001 11.5v12c0 .266.234.5.5.5h23c.266 0 .5-.234.5-.5zm0-16.422C26 6.687 26.094 6 25.5 6h-23c-.266 0-.5.234-.5.5 0 1.781.891 3.328 2.297 4.438a980.43 980.43 0 0 1 6.266 4.953c.828.672 2.328 2.109 3.422 2.109h.031c1.094 0 2.594-1.437 3.422-2.109a946.207 946.207 0 0 1 6.266-4.953c1.016-.797 2.297-2.531 2.297-3.859zm2-.578v17c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 0 1 0 23.5v-17C0 5.125 1.125 4 2.5 4h23C26.875 4 28 5.125 28 6.5z">
      </path>
    </symbol>
  </svg>
  
  
  <a href="about.html">
    <svg class="icon animation">
      <use xlink:href="#triangle-animation"></use>
    </svg>
  </a>

  <svg class="icon mail">
    <use xlink:href="#share-icon-mail"></use>
  </svg>

Answer 3

Используйте, чтобы обернуть svg и стилизовать его

.SvgButton{
  padding: 5px;
  border: 1px solid red;
  display: flex;
  width: 50px;
}

<a class="SvgButton" href="#"><svg class="triangle-animation" width="85" height="85">
                        <polygon points="0,25 25,50, 50,25" fill="rgba(255,0,0,.3)"/>
                        <polygon points="0,12.5 25,37.5, 50,12.5" fill="rgba(0,255,255,.5)"/>
                        <polygon points="0,0 25,25, 50,0" fill="rgba(255,0,255,.8)"/>
                        <path d="M27 64c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
                    </svg></a>