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的文章。 先简单介绍…

房地产销售管理系统中的风险管理与预警机制有什么作用?

​房地产销售管理系统中的风险管理与预警机制是确保企业稳健运营、降低潜在风险的关键组成部分。这一机制旨在通过系统化的手段&#xff0c;对房地产销售过程中可能出现的各种风险进行识别、评估、预警和监控&#xff0c;从而为企业决策提供有力的支持。 一、风险管理 风险识别…

Vue3实战笔记(60)—从零开始:一步步搭建Vue 3自定义插件

文章目录 前言一、自定义插件二、使用步骤总结 前言 在开发和学习中&#xff0c;经常使用一些好用的插件&#xff0c;那么如何创建一个自己的插件呢&#xff1f;在 Vue 3 中&#xff0c;你可以通过创建一个包含 install 方法的对象来定义自定义插件。install 方法接收两个参数…

鱼哥赠书活动第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[…

Python 高手编程系列二:Python 3 和 Python 2 的主要差异

前面已经说过&#xff0c;Python 3 打破了对 Python 2 的向后兼容。但它并不是完全重新设计的。 而且&#xff0c;也并不是说 2.x 版本的 Python 模块在 Python 3 下都无法运行。代码可以完全跨版本兼 容&#xff0c;无需其他工具或技术在两大版本上都可以运行&#xff0c;但一…

BCA蛋白定量法简介-卡梅德生物

BCA&#xff08;Bicinchoninic Acid&#xff09;蛋白定量法是一种广泛使用的生化分析技术&#xff0c;用于测定样品中的总蛋白质含量。它基于两种化学物质的反应&#xff1a;铜离子&#xff08;Cu^2&#xff09;和双邻二氮杂菲&#xff08;Bicinchoninic Acid&#xff0c;BCA&a…

AUTOSAR ECUM模块介绍

AUTOSAR ECUM 模块概述 在现代汽车电子系统中,AUTOSAR(Automotive Open System Architecture)扮演着至关重要的角色。而其中的 EcuM(ECU Management)模块更是具有核心地位。 EcuM 模块主要负责 ECU(Electronic Control Unit)的管理和控制。它的定义可以概括为:一个集成…

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

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

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

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

ubuntu早期版本以及18.04后的版本,通过rc.local配置开机自启

在ubuntu早期版本以及18.04后的版本&#xff0c;还是支持在rc.local中进行操作开机自启。 1、编辑rc.local文件 cat <<EOF >/etc/rc.local #!/bin/sh -e # rc.local # This script is executed at the end of each multiuser runlevel. # Make sure that the script…

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

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

Go 语言中的数组:声明、初始化与应用

Go 语言的数据结构中&#xff0c;数组是一个基本的构成元素&#xff0c;它能存储一系列固定长度的项&#xff0c;这些项具有相同的类型。尽管在 Go 中切片的使用更为普遍&#xff0c;数组仍然是理解更高级数据结构如切片和map的基础。本文将详细探讨 Go 语言中数组的声明、初始…

JL-03-Y1 清易易站

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