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-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);
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/680414.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端处理流式数据(SSE服务)

前言 将数据用流的方式返回给客户端,这种技术需求在传统的管理项目中不多见,但是在媒体或者有实时消息等功能上就会用到,这个知识点对于前端还是很重要的。 即时你不写服务端,但是服务端如果给你这样的接口,你也得知道怎么去使用联调。 nodejs实现简单的SSE服务 SSE服务(Se…

Java:流程控制语句

文章目录 一、顺序结构二、分支结构2.1 if2.2 switch 三、循环结构3.1 for3.2 while3.3 do...while 四、流程控制4.1 break4.2 continue 五、结语 一、顺序结构 顺序结构语句是Java程序默认的执行流程&#xff0c;按照代码的先后顺序&#xff0c;从上到下依次执行。 二、分支结…

宏集Panorama SCADA:个性化定制,满足多元角色需求

前言 在考虑不同人员在企业中的职能和职责时&#xff0c;他们对于SCADA系统的需求可能因其角色和工作职责的不同而有所差异。在SCADA系统的设计和实施过程中&#xff0c;必须充分考虑和解决这种差异性。 为了满足不同人员的需求, 宏集Panorama SCADA平台具备灵活的功能和定制…

新书速览|Python Django 4构建动态网站的16堂课

Python Django 4构建动态网站的16堂课 本书内容 《Python Django 4构建动态网站的16堂课》是一本关于Django框架的网站开发入门教材&#xff0c;适合想要学习并掌握Django框架的开发人员阅读。《Python Django 4构建动态网站的16堂课》共分16课&#xff0c;内容包括网站开发环境…

影响指挥中心操作台的材质选择的因素有哪些

指挥中心操作台作为现代指挥系统的重要组成部分&#xff0c;其材质的选择不仅关系到操作台的使用寿命和稳定性&#xff0c;更直接影响到整个指挥中心的运行效率和安全性。因此&#xff0c;对指挥中心操作台的材质设定一系列标准显得尤为重要。 耐用性考量&#xff1a;鉴于指挥中…

Android Dialog使用汇总

Dialog分类 AlertDialog Dialog 类是对话框的基类&#xff0c;官方建议我们不要直接实例化它&#xff0c;而是使用其子类来获取实例。AlertDialog是系统提供的一个直接子类&#xff0c;它能帮助我们快速构建出不同类型的弹窗。接下来就看下各种类型弹窗的使用。 1、普通对话框…

【遗传算法】【机器学习】【Python】常见交叉方法(一)、单点交叉和两点交叉

一、遗传算法流程图 交叉过程即存在于上图的”交叉“&#xff08;crossover&#xff09;步骤中。 二、单点交叉 随机地选择1个交叉位点进行交叉&#xff0c;如下图所示&#xff1a; 用random库实现随机性&#xff1a; import random# 简单的单点交叉方式 def sing_muta(lis…

AI写作革命:毕业论文的新助手

写作这件事一直让我们从小学时期就开始头痛&#xff0c;初高中时期800字的作文让我们焦头烂额&#xff0c;一篇作文里用尽了口水话&#xff0c;拼拼凑凑才勉强完成。 大学时期以为可以轻松顺利毕业&#xff0c;结果毕业前的最后一道坎拦住我们的是毕业论文&#xff0c;这玩意不…

操作简单中医电子处方中药划价系统软件视频教程,佳易王诊所电子处方管理系统软件

操作简单中医电子处方中药划价系统软件视频教程&#xff0c;佳易王诊所电子处方管理系统软件 一、前言 以下软件操作教程以&#xff0c;佳易王中西医诊所电子处方软件为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、软件支持中医和西医处方…

多功能光时域反射仪的工作原理

6426A-2101多功能光时域反射仪是新一代掌上型智能化光纤通信测量仪器&#xff0c;具有强大的功能和广泛的应用领域。它能够显示光纤及光缆的损耗分布曲线图&#xff0c;测量光纤及光缆的多种关键参数&#xff0c;包括长度、损耗、接续质量等&#xff0c;为光纤通信系统的工程施…

leetcode第867题:转置矩阵

matrix[i][j]需要放在转置矩阵的(j,i)位置 public class Solution {public int[][] Transpose(int[][] matrix) {int rows matrix.Length; int columns matrix[0].Length; int[][] array2 new int[columns][];// 初始化内部数组&#xff08;列数&#xff09;for (int i 0…

GAT1399协议分析(六)--校时

一、官方消息定义 DeviceIDType &#xff1a;GA/T1400.1,采集设备、 卡口点位、 采集系统、分析系统、视图库、应用平台等设备编码规则 TimeCorrectModeType&#xff1a; dateTime时间格式&#xff1a; TimeZone&#xff1a;时区&#xff0c;GAT1400里面没有找到具体内容&…

四川菊乐食品IPO终止:收入增速放缓,内控缺陷遭关注,产能过剩

近日&#xff0c;深圳证券交易所披露的信息显示&#xff0c;四川菊乐食品股份有限公司&#xff08;下称“菊乐股份”或“菊乐食品”&#xff09;及其保荐人中信建投证券撤回上市申请文件。因此&#xff0c;深圳证券交易所决定终止对该公司首次公开发行股票并在主板上市的审核。…

openGauss系数据库逻辑复制实现双写

本篇关于逻辑复制实现双写的案例&#xff0c;本来准备了3个环境&#xff0c;分别是306、501和505&#xff0c;奈何在5版本向3版本订阅的时候&#xff0c;出现了报错&#xff0c;但也将整个过程都记录下来吧。 环境准备 节点信息 MogDB# select version(); …

关于认证协议

本地用户认证 本地认证的意思就是&#xff0c;我们的电脑上存储着自己的账号密码&#xff0c;无论电脑是否联网&#xff0c;只要能开机&#xff0c;就可以输入账号密码登录到电脑中&#xff0c;工作组就是采用本地认证 本地认证流程 winlogon.exe -> 接收用户输入 -> …

哇噻,Zabbix7.0 LTS正式发布!功能又进化了!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…

Python图像处理十讲

文章目录 1 初步2 光斑分析3 插值变换4 形态学处理5 滤波6 opencv初步7 相机校准8 图像分割9 边缘检测10 目标识别 1 初步 &#x1f4f7;初步 图像的本质就是矩阵&#xff0c;图像处理&#xff0c;也就是矩阵处理。所以&#xff0c;在Python中&#xff0c;numpy和matplotlib可…

【python009】Python处理某区域边界经纬度数据至geohash

1.熟悉、梳理、总结项目研发实战中的Python开发日常使用中的问题、知识点等&#xff0c;如Python处理某区域边界经纬度数据至geohash&#xff0c;便于时空交集。 2.欢迎点赞、关注、批评、指正&#xff0c;互三走起来&#xff0c;小手动起来&#xff01; 3.欢迎点赞、关注、批评…

FuTalk设计周刊-Vol.044

#AI漫谈 热点捕手 1、OpenAI取消GPT-4 Turbo&#xff0c;所有每日限制&#xff01; 2月17日&#xff0c;OpenAI在社交平台宣布&#xff0c;取消了GPT-4 Turbo的所有每日限制&#xff0c;并将速率限制提升1倍。现在&#xff0c;每分钟可处理高达150万TPM的数据。 链接https:/…

数据库JDBC 查询sqlserver 2019 利用模板实现输入查询

数据源 SQLserver2019的数据&#xff0c;在数据库 名为 cyz 中创建几个表 create table book (bno char(10) primary key, cno char(10), bname char(20), bauthor char(20), bpress varchar(50), bprice decimal(8,2) )create table reader (rno char(10) primary key, rdepa…