html 利用svg矢量图时无法 调整宽高问题解决，不能像图片一样设置宽高比例 ...

引入的路径后加  #svgView(preserveAspectRatio(none))
详细代码如下

1. 修改前
2. <img src="@/assets/svgs/full_screen_full.svg" class="im">
3. 修改后
4. <img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">
6. .im{
7.     //transform: scale(2,1);
8.     width: 100px;
9.     height: 200px;
10. }
14. 同时对于svg作为背景的情况也适用
19. <template>
20.     <div class="parent-container">
21.       
22.         <el-row  v-for="rindex of 4" :key="rindex" :id="rindex" :ref="rindex">
23.             <point v-for="cindex of 8" :key="cindex" :widthp="widthp" :heightp="heightp"  :sizep="sizep"  :color1="color1"  :color2="getpcolr2(rindex,cindex)"></point>
24.         </el-row>
25.     </div>
26.     <img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">
28.     <div class="svg-container">
29.   <svg viewBox="0 0 100 100" width="100%">
30.     <!-- SVG内容 -->
31.   </svg>
32. </div>
34. </template>
39. .parent-container {
40.   padding: 1.5%;
41.   display: inline-block;
42.   background-image: url('@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))');
43.   background-repeat:no-repeat;
44.   position: contain;
45.   background-size: 110% 100%;
46.   background-color: rgb(129, 132, 134);
47. }

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。