ToB企服应用市场:ToB评测及商务社交产业平台

标题: html 利用svg矢量图时无法 调整宽高问题解决,不能像图片一样设置宽高比例 [打印本页]

作者: 诗林    时间: 2024-6-14 22:46
标题: 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">
  5. .im{
  6.     //transform: scale(2,1);
  7.     width: 100px;
  8.     height: 200px;
  9. }
  10. 同时对于svg作为背景的情况也适用
  11. <template>
  12.     <div class="parent-container">
  13.       
  14.         <el-row  v-for="rindex of 4" :key="rindex" :id="rindex" :ref="rindex">
  15.             <point v-for="cindex of 8" :key="cindex" :widthp="widthp" :heightp="heightp"  :sizep="sizep"  :color1="color1"  :color2="getpcolr2(rindex,cindex)"></point>
  16.         </el-row>
  17.     </div>
  18.     <img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">
  19.     <div class="svg-container">
  20.   <svg viewBox="0 0 100 100" width="100%">
  21.     <!-- SVG内容 -->
  22.   </svg>
  23. </div>
  24. </template>
  25. .parent-container {
  26.   padding: 1.5%;
  27.   display: inline-block;
  28.   background-image: url('@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))');
  29.   background-repeat:no-repeat;
  30.   position: contain;
  31.   background-size: 110% 100%;
  32.   background-color: rgb(129, 132, 134);
  33. }
复制代码

 

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




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4