如何使 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 个项目，第 1 个和第 2 个是完全相同的图像 height/width/style。最后一项是风格与其他不同的SVG。

请问如何使 SVG 的样式始终与其他样式相同？（要知道图片来源总是一样的）

Answer 1

您需要添加一个视图框来设置 SVG 的宽高比，它的行为与 img 相同：

.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 viewBox="0 0 2048 1356">
         <image xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"></image>
      </svg>
      <span>svg</span>
   </div>
</div>

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

How to make an svg have the same style as the images

html

css

svg

height