在锚点标签下，使.SVG文件对象可点击。

Question

在锚点标签下，使.SVG文件对象可点击。

3

我有一个场景，需要可点击的 .svg 文件对象，该对象位于锚标签和 div 下方。

我有解决方案，可以将 display:inline-block 添加到 div (.svg-wrapper) 或锚标签。然而，由于某些 CSS 功能，我需要在锚标签上以及在 div 上使用Display:contents。

.component-content{
      display: flex;
      overflow: hidden;
}
a{
      display: contents;
}
.svg-wrapper{
  display: contents;
}
.svg-container{
    height: auto;
    align-self: start;
    padding: 0 19px 0 0;
    max-width: 50%;
    pointer-events: none;
}

<div class="component-content">
<a href="http://google">
<div class="svg-wrapper">
<object class="svg-container" type="image/svg+xml"  data="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
<img  src="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
</object>
</div>
</a> 
</div>

- Ashu

这个回答解决了您的问题吗？将HTML SVG对象也变成可点击链接 - Mike

谢谢Mike的评论。然而，提到的链接在我的HTML中无法工作。 - Ashu

只需从 a 中删除 display:contents 即可。您说您需要将它保留在 svg-wrapper 中，它可以留在那里，但请从 a 中删除它，这样它就能正常工作了。 - Mike

我需要在锚点和div上都使用display:contents，我已经更新了我的问题以便更好地理解。 - Ashu

有人能帮我解决这个问题吗？ - Ashu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike · Accepted Answer

将对象元素用另一个 div 包装起来。我找不到其他的解决方案。请查看：https://jsfiddle.net/4qdLx5n9/2/

<div class="component-content">
  <a href="http://google">
    <div class="svg-wrapper">
      <div>
        <object class="svg-container" type="image/svg+xml" data="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
          <img src="https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/youtube-icon-dark-grey.svg">
        </object>
      </div>
    </div>
  </a>
</div>

@edit 你的问题还有另外一个解决方案，即为锚点元素添加使用::after并设置position: absolute，同时给组件内容添加position: relative。此方法同样可行: https://jsfiddle.net/j7yx648w/3/

.component-content {
  display: flex;
  overflow: hidden;
  position: relative;
}

a {
  display: contents;
}

a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.svg-wrapper {
  display: contents;
}

.svg-container {
  height: auto;
  align-self: start;
  padding: 0 19px 0 0;
  max-width: 50%;
  pointer-events: none;
}