html 利用svg矢量图时无法 调整宽高问题解决，不能像图片一样设置宽高比例
引入的路径后加 #svgView(preserveAspectRatio(none))详细代码如下
修改前
<img src="@/assets/svgs/full_screen_full.svg" class="im">
修改后
<img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">
.im{
//transform: scale(2,1);
width: 100px;
height: 200px;
}
同时对于svg作为背景的情况也适用
<template>
<div class="parent-container">
<el-rowv-for="rindex of 4" :key="rindex" :id="rindex" :ref="rindex">
<point v-for="cindex of 8" :key="cindex" :widthp="widthp" :heightp="heightp":sizep="sizep":color1="color1":color2="getpcolr2(rindex,cindex)"></point>
</el-row>
</div>
<img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">
<div class="svg-container">
<svg viewBox="0 0 100 100" width="100%">
<!-- SVG内容 -->
</svg>
</div>
</template>
.parent-container {
padding: 1.5%;
display: inline-block;
background-image: url('@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))');
background-repeat:no-repeat;
position: contain;
background-size: 110% 100%;
background-color: rgb(129, 132, 134);
} https://img-blog.csdnimg.cn/direct/47b660e1f08d4d76beee01c00b4da518.png
https://img-blog.csdnimg.cn/direct/bb8c0ec99f5b482ca906552eae77c155.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]