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

devtools/2024/9/24 7:21:01/
htmledit_views">

引入的路径后加  #svgView(preserveAspectRatio(none))

具体代码如下

javascript"> 修改前
<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-row  v-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);
}

 


http://www.ppmy.cn/devtools/46538.html

相关文章

vue2中使用tinymce

vue2中使用tinymce的记录 本篇文章主要实现的功能&#xff1a; &#xff08;1&#xff09;【查看】时禁用编辑 &#xff08;2&#xff09;【编辑】时某些内容是不可编辑的 实现效果图&#xff1a; 第一个功能的主要代码 disabled属性 // 使用地地方&#xff0c;传递disabled属…

Nginx平滑升级

目录 编译安装nginx1.18 平滑升级至1.22版本 本文记录了编译安装的nginx1.18平滑升级到nginx1.22版本的流程&#xff0c;都采用的编译安装&#xff0c;有不清楚流程的可以评论区我&#xff0c;咱们一起讨论。 编译安装nginx1.18 # 安装编译依赖 yum -y install gcc pcre pc…

为什么会有websocket(由来)

一、HTTP 协议的缺点和解决方案 1、HTTP 协议的缺点和解决方案 用户在使用淘宝、京东这样的网站的时候&#xff0c;每当点击一个按钮其实就是发送一个http请求。那我们先来回顾一下http请求的请求方式。 一个完整的http请求是被分为request请求节点和response响应阶段的&…

容器项目之前后端分离

容器化部署ruoyi项目 #需要的镜像nginx、java、mysql、redis、 #导入maven镜像、Java镜像和node镜像 docker load -i java-8u111-jdk.tar docker load -i maven-3.8.8-sapmachine-11.tar docker load -i node-18.20.3-alpine3.20.tar #拉取MySQL和nginx镜像 docker pull mysql…

AI降重:如何有效降低毕业论文查重率?

现在大部分学校已经进入到论文查重降重的阶段了。如果查重率居高不下&#xff0c;延毕的威胁可能就在眼前。对于即将告别校园的学子们&#xff0c;这无疑是个噩梦。四年磨一剑&#xff0c;谁也不想在最后关头功亏一篑。 查重率过高&#xff0c;无非以下两种原因。要么是作为“…

Django中使用Celery和APScheduler实现定时任务

在之前的文章我们已经学习了Celery和APScheduler的基本使用&#xff0c;下面让我们来了解一下如何在Django中使用Celery和APScheduler Celery 1.前提工作 python 3.7 pip install celery pip install eventlet #5.0版本以下 pip install importlib-metadata4.8.3&#xff08…

JARBAS - Jenkins渗透原理详解

nmap端口扫描 主机发现 创建文件夹进行保存扫描记录 指定最低1万速率扫描所有端口 提取端口 详细扫描 脚本扫描 web渗透 脚本扫描里有robots&#xff1b;去看一下 # we dont want robots to click "build" links User-agent: * Disallow: /先目录爆破80端口 没有信…

目标检测数据集 - 海洋垃圾检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;海洋垃圾检测数据集&#xff0c;真实拍摄海洋海底场景高质量垃圾检测图片数据&#xff0c;涉及场景丰富&#xff0c;比如海底塑料垃圾数据、海底铁制品罐状垃圾数据、海底纸张垃圾数据、海洋生物和海底垃圾同框数据、海底探索仪器和海底垃圾同框数据、海…