如何使svg具有与图像相同的样式

Question

这是我的物品清单：

.anim-box{margin-top:5%;display:flex;width:100%;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.anim-box .item{display:flex;flex:0 0 30%;flex-direction:column;justify-content:center;align-content:center;text-align:center;cursor:pointer;}
.anim-box .item svg,.anim-box .item img{height:auto;width:100%;}

<div class="anim-box">
   <div class="item"><img id="entry4" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"><span>spin</span></div>
   <div class="item"><img id="entry5" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg" class="" style=""><span>zoom</span></div>
   <div class="item">
      <svg>
         <image xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"></image>
      </svg>
      <span>svg</span>
   </div>
</div>

这里有3个项目，第一个和第二个是高度完全相同的图像。最后一个项目是高度与其他项目不同的SVG。

请如何使SVG的高度始终与其他高度相同？

Answer 1

您可以执行以下操作：

您使用的svg具有不同的大小，因此您需要先确定该大小，在这种情况下，我已经使用了150px，因此可以随意使用所需的任何大小。

.anim-box{
  border:1px solid black;
  display:flex;
  margin:2%;
  flex-wrap:wrap;justify-content:space-between;align-items:center;
}


.item img,
.item svg {
  height:150px;
  width:150px;

}

<div class="anim-box">
   <div class="item"><img id="entry4" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"><span>spin</span></div>
   <div class="item"><img id="entry5" src="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg" class="" style=""><span>zoom</span></div>
   <div class="item">
      <svg>
         <image xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"></image>
      </svg>
      <span>svg</span>
   </div>
</div>