svg 图标无法铺满的问题

最新推荐文章于 2024-07-24 09:17:32 发布
最新推荐文章于 2024-07-24 09:17:32 发布
阅读量838 收藏
点赞数 2
分类专栏： vue svg-icon
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36775019/article/details/121209437
版权

svg 
//在svg 源文件的svg 头文件 加入 preserveAspectRatio="none meet" 
<?xml version="1.0" encoding="UTF-8"?>
<svg width="319px" height="76px" viewBox="0 0 319 76" version="1.1" xmlns="http://www.***/2000/svg" xmlns:xlink="http://www.***.org/1999/xlink" preserveAspectRatio="none meet">

即可实现自适应外部盒子宽高

SVG排版教程 | ＜SVG＞元素属性原理详解与应用
懂点君
12-11 1301
本教程的目的 ● 了解SVG元素的特性 ● 了解xmlns属性 ● 了解width和height属性 ● 了解viewBox属性的作用 ● 了解preserveAspectRatio属性 ● 实际开发应用viewBox属性
sap.m.Image 与 sap.m.Avatar 两款 SAP UI5 图片显示控件的使用辨析
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-24 20
Image 与 Avatar 不是简单的换皮关系，而是功能深度截然不同的两种控件：前者着力于承载视觉媒体，后者致力于语义化标识。在 UI5 应用中，根据信息密度、语义清晰度与性能要求，合理挑选并配置这两者，可获得既美观又高效的用户体验。
SVG不能铺满的问题
moqiuqin的博客
01-13 5746
最近在进行界面绘制的时候，美工提供过来的图是svg格式，一开始觉得这样也好，但是在用的时候就发现了问题，设置了容器样式的宽高都是100%，容器高度也是能撑开的，但是svg图片不能进行宽高的拉伸将容器铺满，查了一下才知道svg中需要这个属性preserveAspectRatio="none meet"同时也要注意的是svg的width和height也得是100%。见下图： ...
svg图片无法完全铺满
abc589721的博客
02-05 3106
今天设计给了一张svg的图片做背景，但是经过两个小时的纠结，发现就是无法铺满元素，然后经过高人指点，发现是svg图片的原因，百度后果然能解决问题。 解决： 在webstorm里面打开svg图片，然后在svg标签上面加上属性：preserveAspectRatio="none meet"; <svg width="1264px" height="722px" v...
svg image 图片无法铺满 circle 的问题解决
weixin_30571465的博客
06-04 1760
引子 使用d3.js绘制了力布图后，需要在circle中绘制图片，方法如下： // 绘制图片 drawPattern(gContainer) { let that = this; let gPattern = gContainer.append("g").attr("class", "g-pattern"); // 添加pattern pat...
svg图片无法铺满的问题
weixin_44100002的博客
06-01 1099
svg文件打开在svg标签加上 preserveAspectRatio=“none meet”
svg中的image标签图片平铺处理
牟云飞的博客
07-14 5274
svg中嵌入image标签后，修改image标签大小，图片并不会拉伸， image标签中增加preserveAspectRatio="none" vector-effect="non-scaling-stroke"
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
点击SVG图标时，就会触发`click`方法，该方法检查浏览器是否支持全屏功能，如果不支持，则提示用户，如果支持，则通过`screenfull.toggle()`方法来切换全屏状态。 请注意，上述代码中的SVG代码部分只是一个示意，你...
webfont实现图标任意赋色及其他方案总结
凤梨
07-24 287
前言 最近制作一个项目，由于主题风格不一样，每次都要重新切图，小icon又很多，身为切图小能手的我也感到十分疲惫。 考虑到后续有可能项目重构，各个主题风格又得重新切一次图了，于是开始寻找代替纯切图并适用于迭代版本的技术方案。 兼容性要求IE10+以上的浏览器。 方案挑选 A.background-blend-mode 或者 mix-blend-mode 实现过程 <div class="pi...
HTML面试题汇总
歌谣的博客
12-01 1017
【HTML】 [html] 你有使用过MediaRecorder吗？说说它的运用场景有哪些？ [html] 进入编辑页面时，如何把光标聚焦到第一个input？ [html] 如何给input的右上角加个清除的按钮 [html] 举例说明只用html和css如何使得一个列表编号倒序？ [html] H5页面在微信中如何禁止分享给好友和朋友圈？ [html] http中的301、302、307、308有什么区别？ [html] 说说你对短链接的理解，它有什么应用场景呢？ [html] 网页中的友情链接有什么作用
关于QT的paintEvent绘制图片
WLJKK的博客
07-24 474
支持传入QImage和QPixmap，增加：加载图片、修改保存、删除文件、图片添加文字、翻转图片几个功能，适合需要查找API的小伙伴。文字和添加位置等可以自己拓展。
学习SVG（七）图案和渐变填充
小小的前端
07-21 1615
在SVG中图形的填充和轮廓除了使用纯色，还可以使用图案和渐变。
svg无法占满屏幕
Li-的博客
10-26 2170
问题描述： 使用svg作为背景时，发现容器可以占满，但svg无法铺满整个容器 解决方案：打开svg图片，然后在svg标签上面加上属性：preserveAspectRatio="none meet"; <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 250" preserveAspectRatio="none meet" > ...
svg自适应父级盒子
m0_53001289的博客
02-14 205
svg在不同大小的盒子里自适应
svg自适应全屏
宏斌的博客
04-28 1760
const { innerHeight, innerWidth } = window; export const Wave = ( <svg viewBox={`0 0 ${innerWidth} ${innerHeight}`} width={innerWidth} height={innerHeight} xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect
g标签 怎么设置svg,如何获得svg：g元素的宽度
weixin_29497751的博客
12-23 431
I am currently working with an svg element in JavaScript. And I am new to this.My question is that I have an svg element in which I have multiple svg:g elements. And in my svg:g elements I have variou...
获取SVG中g标签的宽度高度及位置坐标
shidouyu的专栏
02-26 2495
获取SVG中g标签的宽度高度及位置坐标 1. 问题的出现 对于普通的HTML元素，有很多获得其宽度width、高度height、距左left、距顶top等属性的方法： 类似offsetWidth，clientWidth,width之类的，通过查看DOM元素的属性可以一探究竟： 然而当遇到SVG的g标签的时候，却碰到问题了： 明明在开发者工具中可以显示的宽高、位置坐标等属性，通过原有的offsetWidth，ClientWidth获得值却为undefined: 这说明，普通的DOMElenme
js获取svg中g元素的宽高
qq_41756580的博客
04-22 3684
这里有一个g元素： <g id="g_main" transform="translate(120,2804.5)"> <rect></rect> <rect></rect> <rect></rect> <rect></rect> ... <...
鸿蒙的svg图标、内外边距和边框
2301_81915581的博客
03-15 1009
需求：界面中展示图标 → 可以使用 svg 图标（任意放大缩小不失真、可以改颜色）
use标签使用fill
09-26
使用标签最常见的情况是在使用CSS设置背景图像时，可以通过将图像放在标签内，使其自动铺满整个元素的背景，不出现图像重复的情况。在设置背景图像时，可以使用标签来保持图像比例，以便完整地显示整个图像，并且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值