javascript - 如何使这个 svg 圆圈可点击

Question

我正在尝试使红色圆圈可点击。
我尝试添加 href 属性，但这没有用。
我希望有人能够帮助我解决这个问题。

提前致谢!

screenshot

.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>