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.rhkb.cn/news/341117.html

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

相关文章

Bigdecimal 除法用法

Bigdecimal 除法使用引言 在开发中遇到了一个Bigdecimal的问题&#xff0c;在此记录一下。 ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result.距离如下图。 // 问题代码BigDecimal result BigDecimal.ONE.divide(new BigDec…

Windows下使用Airsim+QGC进行PX4硬件在环HITL(一)

Windows下使用AirsimQGC进行PX4硬件在环HITL This tutorial will guide you through the installation of Airsim and QGC on Windows, so that the hardware-in-the-loop experiment can be conducted. Hardware-in-the-Loop (HITL or HIL) is a simulation mode in which nor…

ECharts 图形化看板 模板(简单实用)

目录 一、官网 二、模板 ①定义请求​编辑 ② 将请求统一管理&#xff0c;别的页面引用多个请求时更便于导入。​编辑 ③最终模板 三、执行效果 四、后端代码 4.1 controller 4.2 xml 4.3 测试接口 一、官网 获取 ECharts - 入门篇 - 使用手册 - Apache ECharts 二、…

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

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

化学化工领域科技查新点提炼方法!--附案例

化学化工领域&#xff0c;严格地讲应该是化学化工领域&#xff0c;一个侧重理论&#xff0c;一个侧重应用。者发展非常成熟&#xff0c;学科划分细致&#xff0c;在研究上共性很多&#xff0c;所以&#xff0c;这里我们结合查新课题的特点将其合并在一个专题下进行讨论。 从查…

结构体+结构体内存对齐+结构体实现位段

结构体内存对齐实现位段 一.结构体1.结构体的声明2.结构体变量成员访问操作符3.结构体传参4.匿名结构体5.结构的自引用 二.结构体内存对齐1.对齐规则2.为什么存在内存对齐&#xff1f;3.修改默认对齐数 三.结构体实现位段1.什么是位段2.位段的内存分配3.位段的跨平台问题4.位段…

ARM32开发——串口库封装(初级)

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 开发流程分组创建 接口定义完整代码 开发流程 在文件系统中&#xff0c;创建库目录Library在keil工程中&#xff0c;创建分组管理…

Warning:成交前,永远相信意外即将发生

作为一名首次次创业者&#xff0c;随着创业进入深层次阶段&#xff0c;越来越感觉到&#xff1a;创业是一条不归路&#xff0c;因为路上不止有惊喜&#xff0c;还有风尘。创业之前我认为世界是“天圆地方”的&#xff0c; 创业后你猜我怎么看这个世界的&#xff1f; 创业前我一…

B端数据看板,其实数据可以更美的。

B端数据看板可以通过设计来提升其美观度。 色彩和配色方案&#xff1a; 选择适合品牌和数据类型的色彩搭配方案。使用渐变色、明亮的色调和对比度来突出重要的数据指标。 数据可视化&#xff1a; 使用图表、图形和数据图像来呈现数据&#xff0c;使其更易于理解和解读。选择…

牛客ONT45 距离是K的二叉树节点【中等 宽度优先遍历 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/e280b9b5aabd42c9b36831e522485622 思路 图&#xff0c;队列 构件图&#xff0c;直接从target出发&#xff0c;扩展到第k层就是答案Java代码 import java.util.*;/** public class TreeNode {* int val 0;* …

第十五届蓝桥杯物联网试题(国赛)

好&#xff0c;很好&#xff0c;国赛直接来个阅读理解&#xff0c;我猛做4个小时40分钟&#xff0c;cpu都干冒烟了&#xff0c;也算是勉强做完吧&#xff0c;做的很仓促&#xff0c;没多检查就交了&#xff0c;方波不会&#xff0c;A板有个指示灯没做&#xff0c;其他应该都还凑…

云原生下的数据协调艺术:etcd存储系统解析

目录 一、分布式存储简介 二、etcd介绍 三、etcd架构 四、etcd集成实践 一、分布式存储简介 随着云原生与容器化技术的兴起&#xff0c;分布式系统的复杂性大大增加。分布式系统面临一系列问题&#xff0c;比如部署复杂、响应时间慢、运维复杂等&#xff0c;其中最根本的问…

NVIDIA JetPack 6.0(现已正式发布)

NVIDIA JetPack 6.0&#xff08;现已正式发布&#xff09; NVIDIA JetPack SDK 为 NVIDIA Jetson 模块提供支持&#xff0c;为构建端到端加速 AI 应用程序提供全面的解决方案。JetPack 6 通过微服务和一系列新功能扩展了 Jetson 平台的灵活性和可扩展性。它是 2024 年下载次数最…

CodeMirror 创建标签计算编辑器

在日常开发中对于一些数据计算场景可能会遇到标签计算的需求&#xff0c;下面关于如何使用CodeMirror实现标签计算编辑功能。 1&#xff0c;结果图 2&#xff0c;主体代码逻辑 大家只需要复制粘贴主要codeMirror使用逻辑即可 <template><el-dialogref"dialogRe…

python——网络编程

流程图 面向连接的套接字 面向连接的通信提供序列化的、可靠的和不重复的数据交付&#xff0c;而没有记录边界。主要的协议是传输控制协议&#xff08;TCP&#xff09;; TCP套接字&#xff0c;在python中&#xff0c;必须使用SOCK_STREAM作为套接字类型 tcp的特点 面向连接…

AI大模型应用开发实践:5.快速入门 Assistants API

快速入门 Assistants API Assistants API 允许您在自己的应用程序中构建人工智能助手。一个助手有其指令,并可以利用模型、工具和知识来回应用户查询。 Assistants API 目前支持三种类型的工具: 代码解释器 Code Interpreter检索 Retrieval函数调用 Function calling使用 P…

数据结构学习笔记

参考教材&#xff1a;数据结构C语言版&#xff08;严蔚敏&#xff0c;杨伟民编著&#xff09; 参考课程&#xff1a;青岛大学王卓老师&#xff1a;数据结构与算法基础 思维导图&#xff1a;XMind、幕布 正在备考&#xff0c;结合自身空闲时间&#xff0c;不定时更新&a…

Three.js的阴影技术,创建逼真效果的必备!

three.js是一个流行的用于创建和展示3D图形的JavaScript库&#xff0c;它提供了多种阴影技术来增强3D场景的真实感和视觉效果。 一、常用阴影技术 1. 基于光线的阴影&#xff08;Raytraced Shadows&#xff09;&#xff1a;通过跟踪光线的路径来计算阴影&#xff0c;产生非常…

大数据之CDH对Hdfs做Balance数据均衡/数据平衡/数据倾斜

问题的来源: 由于在hive工具运行sql,出现sql卡顿的情况,去cdh上查看yarn资源的分布情况,发现了整个cdh平台中hdfs和yarn资源分布不均匀,大量的爆红显示: 以下 DataNode 数据目录 位于小于其可用空间 10.0 吉字节 的文件系统中。 /data1/dfs/dn&#xff08;可用&#xff1a;7.2 …

Python爬虫协程批量下载图片

import aiofiles import aiohttp import asyncio import requests from lxml import etree from aiohttp import TCPConnectorclass Spider:def __init__(self, value):# 起始urlself.start_url value# 下载单个图片staticmethodasync def download_one(url):name url[0].spl…