首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带em的SVG高度不响应

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,可以用于在Web页面上展示图形和动画。带em的SVG高度不响应是指在SVG图像中使用em单位设置高度时,无法根据父元素的字体大小自动调整高度。

em是一种相对长度单位,它相对于当前元素的字体大小。当在SVG中使用em单位设置高度时,SVG图像的高度将根据当前字体大小进行缩放。然而,由于SVG是一种矢量图形格式,其大小不受页面上其他元素的影响,因此无法根据父元素的字体大小自动调整高度。

为了解决带em的SVG高度不响应的问题,可以考虑以下解决方案:

  1. 使用绝对长度单位:可以使用像素(px)或其他绝对长度单位来设置SVG图像的高度,以确保其在不同环境下具有一致的大小。
  2. 使用百分比:可以使用百分比来设置SVG图像的高度,相对于父元素的高度。这样,当父元素的高度发生变化时,SVG图像的高度也会相应地调整。
  3. 动态计算高度:可以使用JavaScript或CSS来动态计算SVG图像的高度,以适应父元素的大小变化。通过监听父元素的大小变化事件,并根据需要调整SVG图像的高度。

腾讯云提供了一系列与SVG图像相关的产品和服务,例如:

  • 腾讯云对象存储(COS):用于存储和管理SVG图像文件,提供高可靠性和可扩展性。详情请参考:腾讯云对象存储(COS)
  • 腾讯云内容分发网络(CDN):用于加速SVG图像的传输,提供全球覆盖的加速节点,提高用户访问速度。详情请参考:腾讯云内容分发网络(CDN)
  • 腾讯云云服务器(CVM):用于部署和运行SVG图像相关的应用程序和服务,提供高性能的计算资源。详情请参考:腾讯云云服务器(CVM)

以上是关于带em的SVG高度不响应的解释和解决方案,以及腾讯云相关产品和服务的介绍。希望对您有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 奇思妙想 | 巧妙实现圆角三角形

本文将介绍几种实现圆角三角形实现方式。 法一. 全兼容 SVG 大法 想要生成一个圆角三角形,代码量最少、最好方式是使用 SVG 生成。...使用 SVG 多边形标签 生成一个三边形,使用 SVG stroke-linejoin="round" 生成连接处圆角。...完整 DEMO 你可以戳这里:CodePen Demo -- 使用 SVG 实现圆角三角形 法二....图形拼接 不过,上文提到了,使用纯 CSS 实现圆角三角形,但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS,有没有办法呢?...至此,我们就顺利得到一个圆角菱形了! 拼接 3 个圆角菱形 接下来就很简单了,我们只需要利用元素另外两个伪元素,再生成 2 个圆角菱形,将一共 3 个图形旋转位移拼接起来即可!

4.4K41
  • 利用属性选择器对外部链接进行样式设计

    这里我们使用 content 属性和一个 base64 编码 SVG,因为图标非常简单。但你也可以使用一个图像 URL、另一个字符或表情符号。我们可以添加一个小边距,使其稍微远离文本。...a[href^='http']::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E"); margin-left: 0.25em; } 使用 content 属性和 SVG 一个问题是我们无法完全控制图标的大小。...它使用 SVG 固有尺寸。如果我们想将图标应用于任何外部链接,而不考虑字体大小(例如标题),我们可能更适合使用 background-image 属性。...我们可以设置宽度和高度(以 em 为单位,它们相对于字体大小),并使用 background-size 确保我们 SVG 覆盖整个区域。

    11210

    前端面试题-每日练习(3)

    SVG 面临主要问题一个是如何和已经占有重要市场份额矢量图形格式 Flash 竞争问题,另一个问题就是 SVG 本地运行环境下厂家支持程度。 3.“data-”属性作用是什么?...'/> 5.title与h3区别、b与strong区别、i与em区别?...标记和 SVG以及 VML 之间一个重要不同是,有一个基于 JavaScript 绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。...rem rem是CSS3新增一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值倍数 只相对于根元素大小 rem(font size of the...(相对是的HTML元素字体大,默认16px) em与rem重要区别: 它们计算规则一个是依赖父元素另一个是依赖根元素计算

    14820

    Css-移动端适配总结 前言PC端Mobile总结参考&引用

    前言 工作以后,大部分业务工作都是基于移动端H5,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人归纳总结,如有问题,请指出亲喷~ PC...,可以小数 minimum-scale 允许用户最小缩放值,为一个数字,可以小数 maximum-scale 允许用户最大缩放值,为一个数字,可以小数 height 设置layout viewport...高度,这个属性对我们并不重要,很少使用 user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 那么如果我们想设置ideal viewport...4.PostCSS插件postcss-write-svg 直接借助插件帮助我们实现, 其实也就是postcss帮我们生成图片而已。...px、em、rem px: px在前面已经讲了, 就是一个固定单位。 em: em作为font-size单位时,其代表父元素字体大小,em作为其他属性单位时,代表自身字体大小。

    2.4K20

    2022秋招前端面试题(七)(附答案)

    区别(1)SVGSVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言XML描述2D图形语言,SVG基于XML就意味着SVG DOM中每个元素都是可用...在 SVG 中,每个被绘制图形均被视为对象。如果 SVG 对象属性发生变化,那么浏览器能够自动重现图形。...defer 和 async属性都是去异步加载外部JS脚本文件,它们都不会阻塞页面的解析,其区别如下:执行顺序: 多个async属性标签,不能保证加载顺序;多个defer属性标签,按照加载顺序执行...(3)em和rem相对于px更具灵活性,它们都是相对长度单位,它们之间区别:em相对于父元素,rem相对于根元素。em: 文本相对长度单位。相对于当前对象内文本字体尺寸。...和 height 都能撑开一个高度;(2)line-height 赋值方式:单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身行高纯数字:会把比例传递给后代。

    77040

    如何提升你CSS技能,掌握这20个css技巧即可

    7、使用SVG icons SVG使用于所有分辨类,并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG图标字体。...设置SVG格式就跟其他图片类型一样: .logo { background: url("logo.svg"); } 温馨提示:如果将SVG用在可交互元素上比如说button,SVG...; left: 0; position: absolute; top: 0; width: 100%; } 使用20%进行填充使得框高度等于其宽度...} aside { font-size: .9rem; } 然后将文本元素字体大小设置为em h2 { font-size: 2em; } p...可以使用:not和视区单位,根据视区高度和宽度计算字体大小: :root { font-size: calc(1vw + 1vh + .5vmin); } 现在,您可以使用根em单位

    5K20

    基于Vue前端架构,我做了这15点

    100vh === 视口高度 + 浏览器工具栏(地址栏等等)高度 解决方案 安装 vh-check npm install vh-check --save import vhCheck from 'vh-check...{ width: 1.4em; height: 1.4em; fill: currentColor; overflow: hidden; line-height: 1em; display...工具模块:能够高度抽象工具模块,应创建在 @/src/libs 内创建 js 文件。 7、构建优化 包分析工具 构建代码之后,到底是什么占用了这么多空间?...建议当元素需要撑起高度以包含内部浮动元素时,通过对伪类设置 clear 或触发 BFC 方式进行 clearfix。尽量不使用增加空标签方式。 除公共样式之外,在业务代码中尽量不能使用 !...具有高度通用性方法,要封装到 libs、全局组件或指令集里。 为组件样式设置作用域。 尽量使用指令缩写。

    2.6K20

    基于 Vue 前端架构,我做了这 15 点

    100vh === 视口高度 + 浏览器工具栏(地址栏等等)高度 解决方案 安装 vh-check npm install vh-check --save import vhCheck from 'vh-check...{ width: 1.4em; height: 1.4em; fill: currentColor; overflow: hidden; line-height: 1em; display...工具模块:能够高度抽象工具模块,应创建在 @/src/libs 内创建 js 文件。 7、构建优化 包分析工具 构建代码之后,到底是什么占用了这么多空间?...建议当元素需要撑起高度以包含内部浮动元素时,通过对伪类设置 clear 或触发 BFC 方式进行 clearfix。尽量不使用增加空标签方式。 除公共样式之外,在业务代码中尽量不能使用 !...具有高度通用性方法,要封装到 libs、全局组件或指令集里。 为组件样式设置作用域。 尽量使用指令缩写。

    2.8K42

    React组件设计实践总结03 - 样式管理

    样式管理方面的一些解决方案,目的是实现样式高度可定制化, 让大型项目的样式代码更容易维护....转换 svg 图标 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性组件 3....组件样式管理 1️⃣ 组件样式应该高度可定制化 组件样式应该是可以自由定制, 开发者应该考虑组件各种使用场景. 所以一个好组件必须暴露相关样式定制接口....了解更多 antd 3.9 之后使用 svg 图标代替了 font 图标 对比SVG vs Image, SVG vs Iconfont ---- 8️⃣ 结合使用 rem 和 em 等相对单位...比如我会这样定义 svg Icon 样式: .svg-icon { width: 1em; height: 1em; fill: currentColor; } 像 iconfont 一样

    7.1K20

    微信小程序中使用SVG图标

    SVG近几年因各种优势被大量应用,遗憾是到目前为止微信小程序并不支持以XML形式使用SVG,这使得SVG灵活性大大下降,大多数人选择放弃在微信小程序中使用SVG图标方案。... 接下来添加CSS: .svg_icon { display: inline-flex; width: 1em; height: 1em; overflow: hidden...; } .svg_icon-inner { width: 1em; height: 1em; transform: translateY(-1em); filter: drop-shadow...(0 1em 0 currentColor); } 我来解释一下为什么要这么设置DOM结构和CSS:首先svg_icon是整个图标的容器,负责设置图标的大小(1em=父容器字体大小),和隐藏多余部分...(即图标的原始部分),而svg_icon-inner则负责渲染SVG,并投下有颜色阴影,通过给svg_icon-inner设置一个与父容器相同宽高并给其设置一个投影反方向偏移则可以实现改变SVG颜色需求

    3.9K40
    领券