html - 如何使 svg 具有与图像相同的样式
问题描述
这是我的物品清单:
.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 的样式始终与其他样式相同?(要知道图片来源总是一样的)
解决方案
您需要添加一个视图框来设置 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>
推荐阅读
- javascript - Chrome - alert() 的 Javascript 执行顺序问题
- scala - Spark scala:将键值对中的数值更改为长/整数以加入两个地图
- c# - HTMLAgilityPack C# 获取所有节点和子节点
- r - 将函数应用于矩阵的每一行而不使用 R 中的 lapply 函数
- python - TypeError:“OperationalError”类型的对象不是 JSON 可序列化的
- groovy - 当键和值相同时,为什么`java.util.LinkedHashMap`不相等?
- javascript - GAPI 的 OAuth - 初始登录 Javascript 后避免身份验证和授权
- javascript - 如何从单独的页面显示 DataTable 中的行数?
- google-apps-script - Apps 脚本未运行驱动器提取
- python - ValueError: 期望 dict 或 pandas.DataFrame