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

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费注册US.KG域名支持接入CF

注册地址&#xff1a; https://register.us.kg/auth/register 号码和地址我是随便填的&#xff0c;不知道对以后有没有影响 收到激活邮件&#xff0c;可能在垃圾箱里 接下来是有个KYC验证&#xff0c;需要填写信息和上传KYC照片&#xff0c;我也是乱填的和乱上传的。可以去找…

ERPNext - 用Python打造您的企业资源规划解决方案

文章目录 ERPNext - 用Python打造您的企业资源规划解决方案第一部分&#xff1a;背景第二部分&#xff1a;ERPNext是什么&#xff1f;第三部分&#xff1a;如何安装ERPNext&#xff1f;第四部分&#xff1a;ERPNext基本使用方法第五部分&#xff1a;场景应用示例第六部分&#…

Excel 文件损坏了打不开怎么办?几种 Excel 文件修复方法帮助你

当你想要打开电脑 Excel 文件的时候发现系统提示文件被损坏或者其他一些原因导致无法打开&#xff0c;这时候应该怎么办呢&#xff1f;别急下面为大家总结了 Excel 文件修复的一些方法。 更改信任中心 Excel 软件具有内置的安全功能会限制有潜在风险的文件&#xff0c;当 Exc…

挑战你的数据结构技能:复习题来袭【6】

1. (单选题)设无向图的顶点个数为n,则该图最多有&#xff08;&#xff09;条边 A. n-1 B. n(n-1)/2 C. n(n1)/2 D. 0 答案&#xff1a;B 分析&#xff1a; 2. (单选题)含有n个顶点的连通无向图,其边的个数至少为()。 A. n-1 B. n C. n1 D. nlog2n 答案&#xff1a;A…

yolov10代码阅读

一 数据处理 在v8之后&#xff0c;v9和v10都是参考v8的数据增强处理&#xff0c;主要有以下&#xff0c;具体其中一些增强并未用到&#xff0c;可以参考具体配置 二 模型结构 以yolov10x为例子&#xff0c;整个模型结构如下 a. 对于SCDown&#xff0c;是 Spatial-channel d…

AI编程新手快速体验SpringCloud Alibaba 集成AI功能

上周六写了一篇文章 震撼发布&#xff01;Spring AI 框架重磅上线&#xff0c;Java 集成 AI 轻松搞定&#xff01; 部分同学可能没有科学上网的条件&#xff0c;本地ollama 集成又比较笨重。趁着周六&#xff0c;写一篇基于SpringCloud Alibaba 集成AI的文章。 先简单介绍…

鱼哥赠书活动第25期:618火热来袭,网络安全书单推荐

鱼哥赠书活动第25期&#xff1a;&#x1f31f;618火热来袭&#xff0c;网络安全书单推荐&#x1f680; &#x1f3f0; 1. 《内网渗透实战攻略》&#xff1a;&#x1f6e1;️2. 《Kali Linux高级渗透测试&#xff08;原书第4版&#xff09;》&#xff1a;&#x1f396;️ 3. 《C…

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

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

nc解决自定义参照字段前台保存后只显示主键的问题

nc解决自定义参照字段前台保存后只显示主键的问题 自定义参照类VoucherRefModel.java package nc.ui.jych.ref;import nc.ui.bd.ref.AbstractRefModel;/*** desc 凭证号参照* author hanh**/ public class VoucherRefModel extends AbstractRefModel {Overridepublic String[…

企业应用架构模式--详解51种企业应用架构模式

导读&#xff1a;企业应用包括哪些&#xff1f;它们又分别有哪些架构模式&#xff1f; 世界著名软件开发大师Martin Fowler给你答案 目录 01什么是企业应用02 企业应用的种类03企业架构模式 01什么是企业应用 我的职业生涯专注于企业应用&#xff0c;因此&#xff0c;这里所谈…

PySpark特征工程(III)--特征选择

有这么一句话在业界广泛流传&#xff1a;数据和特征决定了机器学习的上限&#xff0c;而模型和算法只是逼近这个上限而已。由此可见&#xff0c;特征工程在机器学习中占有相当重要的地位。在实际应用当中&#xff0c;可以说特征工程是机器学习成功的关键。 特征工程是数据分析…

【Vue】非父子通信-event bus 事件总线

文章目录 一、实现步骤二、代码示例 作用&#xff1a;非父子组件之间&#xff0c;进行简易消息传递。(复杂场景→ Vuex) 一、实现步骤 创建一个都能访问的事件总线 &#xff08;空Vue实例&#xff09; → utils/EventBus.js 叫事件总线的原因是因为本质是它俩消息的接受和发送…

JL-03-Y1 清易易站

产品概述 清易易站是清易电子新研发的一体式气象站&#xff0c;坚持科学化和人文化相结合的设计理念&#xff0c;应用新检测原理研发的传感器观测各类气象参数&#xff0c;采用社会上时尚的工艺理念设计气象站的整体结构&#xff0c;实现了快速观测、无线传输、数据准确、精度较…

NCP1680AAD1R2G是一款CrM PFC控制器IC 用于驱动无桥图腾柱PFC拓扑结构

NCP1680AAD1R2G NCP1680是一个CrM PFC控制器IC&#xff0c;用于驱动无桥图腾柱PFC拓扑结构。无桥图腾柱PFC是一种功率因数校正结构&#xff0c;包括一个以PWM开关频率驱动的快速开关桥臂和一个以AC线频率工作的第二桥臂。这种拓扑结构消除了传统PFC电路输入端存在的二极管桥&am…

LabVIEW冲击响应谱分析系统

LabVIEW冲击响应谱分析系统 开发了一种基于LabVIEW开发的冲击响应谱分析系统&#xff0c;该系统主要用于分析在短时间内高量级输入力作用下装备的响应。通过改进的递归数字滤波法和样条函数法进行冲击响应谱的计算&#xff0c;实现了冲击有效持续时间的自动提取和响应谱的精准…

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

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

冯喜运:6.5今日黄金原油行情怎么看及日内操作策略

【黄金消息面分析】&#xff1a;周三&#xff08;6月5日&#xff09;亚市早盘&#xff0c;现货黄金窄幅震荡&#xff0c;目前交投于2328.13美元/盎司附近。黄金价格周二下跌超过1%&#xff0c;原因是美元在本周晚些时候美国就业数据公布前趋于稳定&#xff0c;该数据可能为美联…

女生适合学GIS开发吗?0基础怎么学?

最近小编在各账号后台会陆续收到一些粉丝留言。其中有些女粉在问&#xff0c;女生适合学GIS开发吗&#xff1f;会被歧视吗&#xff1f; 众所周知&#xff0c;IT行业中男生占了很大部分的比例&#xff0c;那么GIS开发行业也是这样吗&#xff0c;女生适合学习GIS开发吗&#xff…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(五)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失拖放取消的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

【前端 - Vue】Vuex基础入门,创建仓库的详细步骤

&#x1f680; 个人简介&#xff1a;6年开发经验&#xff0c;现任职某国企前端负责人&#xff0c;分享前端相关技术与工作常见问题~ &#x1f49f; 作 者&#xff1a;前端菜鸟的自我修养❣️ &#x1f4dd; 专 栏&#xff1a;vue从基础到起飞 &#x1f308; 若有帮助&…