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

news2024/10/6 14:31:38

引入的路径后加  #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.coloradmin.cn/o/1788887.html

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

相关文章

TypeScript学习(一):开发环境搭建

官方文档搭建参考 https://learn.microsoft.com/zh-cn/training/modules/typescript-get-started/ 1.下载node.js https://nodejs.org/en/download 2.下载vscode https://code.visualstudio.com/ 3.在线ts的测试工具 https://www.typescriptlang.org/play/ 4.下载typescr…

pyqt QAxWidget 读写Excel文件

QaxWidget相比openpyxl 的方式区别是提供了图形界面&#xff0c;excel的输入修改不用再编写代码&#xff0e;activeX技术是个过时的技术&#xff0c;发挥下余热&#xff0e; # -*- coding: utf-8 -*- from PyQt5.QAxContainer import QAxWidget from PyQt5.QtWidgets import …

从人才战略到人才生态,金徽酒高增长的“明线”与“暗线”

执笔 | 文 清 编辑 | 扬 灵 2016年3月&#xff0c;金徽酒于A股上市&#xff0c;全年实现营收12.77亿元。2023年&#xff0c;金徽酒实现营收25.48亿元&#xff0c;比上市当年增加99.5%&#xff0c;近乎翻倍。而当我们深度关注金徽酒&#xff0c;在其业绩高增长的“明线”背…

c语言项目-贪吃蛇项目2-游戏的设计与分析

文章目录 前言游戏的设计与分析地图&#xff1a;这里简述一下c语言的国际化特性相关的知识<locale.h> 本地化头文件类项setlocale函数 上面我们讲到需要打印★&#xff0c;●&#xff0c;□三个宽字符找到这三个字符打印的方式有两种&#xff1a; 控制台屏幕的长宽特性&a…

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

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

VOC格式标签各个字段的解释

想了解一下VOC格式数据标签各个字段的含义&#xff0c;搜了一圈没看到&#xff0c;懒得去官网了&#xff0c;直接问了GPT-4o&#xff0c;以下回答字段解析来自GPT-4o&#xff0c;例子我自己写的 VOC (Visual Object Classes) 数据标签格式主要用于目标检测任务。VOC格式的标签…

Mybatis01-初识Mybatis

简介 1、 什么是Mybatis MyBatis 是一款优秀的持久层框架; 它支持自定义 SQL、存储过程以及高级映射 MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。 MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Ol…

AI绘画Stable Diffusion【隐藏文字】:将艺术字隐藏在国风云雾山水图中

大家好&#xff0c;我是灵魂画师向阳 今天我们分享一下用AI绘画工具Stable Diffusion制作网上很火的隐藏文字。这里以将艺术字隐藏在国风云雾山水图为例进行讲解&#xff0c;下面我们就来看看吧。 一. 艺术字隐藏在国风云雾山水图中制作方法 【第一步】&#xff1a;制作底图…

TH方程学习 (7)

一、内容介绍 TH存在广泛应用&#xff0c;在下面案例中&#xff0c;将介绍几种相对运动模型&#xff0c;斜滑接近模型&#xff0c;本节学习斜滑接近制导方法能够对接近时间、接近方向以及自主接近过程的相对速度进行控制。施加脉冲时刻追踪器的位置连线可构成一条直线&#xf…

PostgreSQL专家(pcp51)--王丁丁

#PostgreSQL培训 #postgresql认证 #postgreSQL考试 #PG考试 #PG培训

深入探索AliExpress API接口:技术实现与代码示例

AliExpress API是阿里巴巴集团为开发者提供的一套开放接口&#xff0c;它允许开发者通过编程方式访问AliExpress平台的数据&#xff0c;如商品信息、订单数据、物流信息等。API支持多种编程语言&#xff0c;包括Java、Python、PHP等&#xff0c;同时提供了丰富的API接口和详尽的…

CSS(盒子模型,定位,浮动,扩展)

CSS 盒子模型&#xff1a;外边距&#xff1a;内边距&#xff1a;水平居中&#xff1a; 定位&#xff1a;相对定位&#xff1a;绝对定位&#xff1a;固定定位&#xff1a; 浮动&#xff1a;扩展&#xff1a; 盒子模型&#xff1a; 盒子模型(Box Model) 规定了元素框处理元素内容…

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

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

vue2中使用tinymce

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

GO语言 服务发现概述

https://zhuanlan.zhihu.com/p/32027014 明明白白的聊一下什么是服务发现-CSDN博客 一、服务发现 是什么 在传统的系统部署中&#xff0c;服务运行在一个固定的已知的 IP 和端口上&#xff0c;如果一个服务需要调用另外一个服务&#xff0c;可以通过地址直接调用。 但是&…

uniadmin引入iconfont报错

当在uniadmin中引入iconfont后&#xff0c;出现错误&#xff1a; [plugin:vite:css] [postcss] Cannot find module ‘E:/UniAdmin/uniAdmin/static/fonts/iconfont.woff2?t1673083050786’ from ‘E:\UniAdmin\uniAdmin\static\fonts\iconfont.css’ 这是需要更改为绝对路径…

大语言模型RAG-将本地大模型封装为langchain的chat model(三)

大语言模型RAG-将本地大模型封装为langchain的chat model&#xff08;三&#xff09; 往期文章&#xff1a; 大语言模型RAG-技术概览 (一) 大语言模型RAG-langchain models (二) 上一期langchain还在0.1时代&#xff0c;这期使用的langchain v0.2已经与之前不兼容了。 本期介…

废品回收小程序怎么做?有哪些核心功能?

废品回收行业正逐步走向高质量发展的道路。在国家政策的推动下&#xff0c;再生资源市场需求旺盛&#xff0c;行业内部竞争格局逐渐明朗。 随着互联网技术的发展&#xff0c;"互联网回收"成为废品回收行业的一个新趋势。通过微信小程序这种线上平台&#xff0c;用户…

Next-Level Agents:释放动态上下文(Dynamic Context)的巨大潜力

编者按&#xff1a; 本文深入探讨了如何通过优化动态上下文信息&#xff08;Dynamic Context&#xff09;来提升 AI Agents 的工作效率和准确性。文章首先概述了五种常见的技术策略&#xff0c;包括信息标识(Message Labeling)、针对不同需求设定不同上下文、优化系统提示词(Sy…

用python写一个基于PyQt5和OpenAI的智能问答项目

摘要&#xff1a; 使用python写一个可以对话的智能问答机器人&#xff0c;界面是使用PyQt5写的&#xff0c;通过调用OpenAl的免费接口&#xff0c;实现实时聊天功能。 1.申请免费的API key 前往页面https://github.com/chatanywhere/GPT_API_free 点击下面链接&#xff1a; …