用另一个div Package object元素。我找不到任何其他的解决方案。检查一下：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;
}