.SVG file object clickable under anchor tag

Question

I have one scenario, where I need to clickable .svg file object which is under anchor tag and div.

I have solution to add display:inline-block to the div(.svg-wrapper) or anchor tag. However, I need Display:contents for anchor tag as well as on div due to some CSS functionality.

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

Does this answer your question? [make an html svg object also a clickable link](https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link) — Mike, Mar 14 '23 at 14:47
Thank you Mike for commenting. However, mentioned link is not working with my html. — Ashu, Mar 14 '23 at 15:06
Removing display:contents from the _a_ should be sufficient, you said you need to keep it in svg-wrapper and it can stay there, remove it from _a_ and it will work — Mike, Mar 14 '23 at 15:12
I need display:contents for both(anchor as well as on div) , I have updated my question for the better understanding. — Ashu, Mar 14 '23 at 15:19

Mike · Accepted Answer · 2023-03-15T12:43:28.173

1

Wrap the object element with another div. I couldn't find any other solution. Check it out: 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 There's one more solution to your problem, adding an ::after with position: absolute to the anchor element and position:relative to component-content works as well: 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;
}

edited Mar 15 '23 at 12:43

answered Mar 15 '23 at 08:45

Mike

75
1
8

Thank you Mike for answering, However, it wont solve my issue as I will not add any extra div. – Ashu Mar 15 '23 at 12:13
@Ashu I've updated the answer with an additional solution, try it – Mike Mar 15 '23 at 12:44
Thanks Mike , It is working, Only concerns , it is working without adding position: relative at component-content class. Is it fine ? – Ashu Mar 15 '23 at 13:18
It depends on what's the structure of your html, check the fiddle i've attached and remove the position: relative, it will make the whole container clickable – Mike Mar 15 '23 at 14:48

.SVG file object clickable under anchor tag

1 Answers1