Как сделать этот SVG круг кликабельным

Question

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

Заранее спасибо!

скриншот

.web-minimal {
  position: relative;
  margin: 24px 0;
  padding: 64px 16px 10px 16px;
  color: #454545;
  border-radius: 3px;
  overflow-x: hidden;
  background-color: #eee;
  min-height: 200px;
  max-width: 1254px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}

.web-minimal:before {
  content: "";
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 56px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 3px 3px 0px 0px;
  background: url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g><a xlink:href="http://google.com"><circle fill-rule="evenodd" clip-rule="evenodd" fill="%23ff0000" cx="8" cy="8" r="5"/></a></g></svg>') 16px 22px no-repeat;
}

<section class="web-minimal"></section>

Answer 1

Вы можете просто добавить дополнительный тег <a> к вашей разметке и применить к нему фоновый SVG вместо псевдоэлемента:

.web-minimal {
  position: relative;
  margin: 24px 0;
  padding: 64px 16px 10px 16px;
  color: #454545;
  border-radius: 3px;
  overflow-x: hidden;
  background-color: #eee;
  min-height: 200px;
  max-width: 1254px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}

.web-minimal:before {
  content: "";
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 56px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 3px 3px 0px 0px;
}

.point {
  position: absolute;
  top: 22px;
  left: 16px;
  display: block;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;charset=utf-8,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="minimal-browser-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><g><a xlink:href="http://google.com"><circle fill-rule="evenodd" clip-rule="evenodd" fill="%23ff0000" cx="8" cy="8" r="5"/></a></g></svg>') no-repeat;
}

<section class="web-minimal">
  <a class="point" href="//yoururl"></a>
</section>