svg设置高度后 父级div会比svg高度高4px左右

SVG高度异常及解决方案
最新推荐文章于 2023-05-30 09:27:37 发布
最新推荐文章于 2023-05-30 09:27:37 发布
阅读量2.8k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： # html5 # d3 # CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ligaoming_123/article/details/93858511
本文探讨了SVG在内联使用时出现的高度异常问题，详细解释了浏览器如何处理换行和空格导致的问题，并提供了两种有效的解决策略：通过负边距消除额外空间或调整SVG元素的显示模式。
  • 背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="background-color: #000">
    <svg  width="100%" height="754" preserveAspectRatio="xMidYMid" viewBox="0 0 1266 754">
      <rect width="100%" height="754"
            style="fill:#fff;"/>
    </svg>
  </div>
</body>
</html>
  • 现象

  • 原因

SVG主要有3种使用场景

1、作为背景图片使用

2、src引入，作为图片使用

3、直接在标签中使用（内联SVG）

在第3中使用方式中，SVG元素是一个inline类型的标签，浏览器会为标签之间的换行和空格，生成一个看不见的空文本节点，这个空的文本节点占据了位置，增加了一个看不见的高度。

  • 解决方式

1、负边距消除 (margin-bottom: -4px;)

2、改成块级标签（display: block; float等）

html 怎么让div和div中svg的高度一样_用SVG教你画宇智波鼬的万花筒写轮眼
weixin_27758233的博客
12-27 892
不知道大家有没有看过火影忍者这部动漫。相信即使没有看过的小伙伴们也都听说过宇智波一族的写轮眼。在动漫中相比拥有主角光环但是脑回路奇葩的“二柱子”，我更欣赏宇智波鼬。如果说火影中奈良鹿丸是战术大师，那鼬一定就是最强预言家，他的大局观在岸本笔下体现的淋漓尽致：自己背上灭族叛忍的骂名，孤身潜入晓组织暗中保护村子，为的就是给弟弟佐助铺好了一条复兴家族、保护村子的英雄之路，只可惜“二柱子”没脑子。...
html5网页特效-svg实现不同投票不同表情
web前端开发教程htmlcssjs
11-30 393
特点： 根据不同评分显示不同表情，并且这些表情看起来像是在一个传送带上可以滚动 使用纯代码(svg)绘制表情以及用于评分的星星 html+css，无javascript，上手难度：很简单 笔记 flex 布局使用flex，这是一种自适应屏幕的布局。注意align-items和justify-content也和flex有关。 .container { display: flex; } 星...
svg被引用时莫名高度多了4px
weixin_44817180的博客
03-25 635
解决办法： 法1.给svg的外标签加个display：flex 法2.给svg的外标签加height：svg的高度，display：flex
html 怎么让div和div中svg的高度一样_假日 Project：用 Houdini 渲染 …… SVG？
weixin_36378222的博客
12-16 205
原文包含 svg 图案，为获得完整阅读体验请前往 http://www.yuguo.me/houdini/SVGCamera/svg_camera.html有啥用装修网站/生成图标之类的嘛 // Houdini 又遭滥用 (手动笑哭), and it's so much fun!初心做了几个 HDA 之后，感觉画 svg 图标这事很烦，不画呢又对不起自己的审美追求，如果能直接截个图当作图标就好了—...
解决div下边距莫名多出4px问题
SiShen654的博客
07-12 899
问题：div下边多出4px 主要是div标签内的留空导致的，解决如下： 将父盒子的文字大小设置为0即可 font-size: 0
CSS控制div宽度最大宽度/高度和最小宽度/高度的方法
09-24
本文将深入探讨如何使用CSS来控制div元素的最大宽度和高度以及最小宽度和高度，特别关注在IE6中的兼容性问题。 首先，CSS提供`min-width`和`max-width`属性来限制元素的宽度。`min-width`确保元素的宽度不会小于...
武汉市地图svg_武汉市地图svg_
10-03
<div id="map" style="width: 800px; height: 600px;"></div> var map = new jvm.WorldMap({ container: $('#map'), map: 'wuhanSvg', backgroundColor: '#ffffff', regionStyle: { initial: { fill: '#...
Svg 嵌入可编辑的div
weixin_34087301的博客
12-12 4580
为什么80%的码农都做不了架构师？>>> ...
vue项目里面引用svg文件并给svg里面的元素赋值
11-19
将解析后的SVG内容插入到DOM中。 4. **遍历SVG元素** 遍历SVG元素，根据条件执行相应操作。 示例代码如下： ```html <div id="bodydv" class="bodydv"> <div style="width:100%; padding:0px; margin:0px; ...
使用SVG基本操作API的实例讲解
08-29
linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0); background-size: 41px 100%, 61px 100%, 83px 100%; } <div id="box"></div> var oSvg = create...
如何设置SVG对象的高度和宽度？
热门推荐
lne818的专栏
08-18 1万+
http://www.w3.org/1999/xlink";>try{var oParentWin= (window.parent)?(window.parent):(window.__parent__);var oParentBody= oParentWin.document.body;var oSVG= null;var fZoom= 1.0;function onResize(event){
SVG画布宽高
qq_32436781的博客
11-05 3423
viewport 表示SVG可见区域的大小。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。 <svg width="500" height="300"></svg> 以上代码定义了一个视区，宽500单位，高300单位； 在SVG中，可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500px，高度为300px。 单位 含义
SVG
xm2by的博客
06-22 957
SVG 基本参数 1、viewport viewport指的是可视区域，通过x、y、width、height属性设置。可视区域听起来不太好理解，先看一下代码： &amp;lt;svg x=&quot;0&quot; y=&quot;0&quot; width=&quot;500&quot; height=&quot;300&quot; style=&quot;border: 1px solid red;&
svg text标签文字超出处理方案
qq_43370509的博客
07-06 2417
svg text标签特殊处理方式
多层SVG嵌套，通过viewBox放大外层SVG时内层会逐渐消失。
Beam
03-16 936
问题： 多层SVG嵌套使用时候，通过设置viewBox控制最外层SVG的缩放，内层会跟着缩放，但是放大到一定程度，内层会逐渐消失。 原因： 内层没有设置高宽！！！ 高宽默认100%，随外层的缩放也在变化，导致外层放大到一定程度，外层高宽小于内层原始高宽，超过部分被遮蔽。 效果对比图： 内层SVG的原始高宽，可用Ai软件打开（文档设置-编辑画板）查阅。 ...
html5画布 svg,HTML5画布与SVG与div
weixin_34749183的博客
06-15 616
小编典典简短的答案：SVG 对您来说将 更加容易 ，因为已经内置了选择和移动它的功能。SVG对象是DOM对象，因此它们具有“ click”处理程序等。DIV可以，但是笨重，并且在大量情况下具有 糟糕的 性能。Canvas具有最佳的性能，但您必须自己实现托管状态的所有概念(对象选择等)，或使用库。长答案：HTML5Canvas只是位图的绘图表面。您设置绘制(用颜色和线条粗细说)，绘制该东西，然后Ca...
svg教程-初识svg
DWX_top的博客
05-30 3717
/在不给 <svg> 设置宽高时，它的默认宽度是 300px ，默认高度是 150px。其实点集完全不需要用逗号隔开，上面的例子中我使用了逗号隔开，完全是为了让自己阅读代码时比价易懂。通过开始点和结束点裁切，可以得到4条弧线，也就是说2个点可以确定2个相同旋转角度的椭圆的位置，可以切出4条弧线。元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。可以在html中直接使用svg，< svg>< /svg>标签，不需要像canvas在js中操作。
svg大小根据内容自适应
qq_16428395的博客
07-08 2618
svg根据内容元素自适应宽高
HTML5 Canvas vs. SVG vs. div
p15097962069的博客
05-08 498
What is the best approach for creating elements on the fly and being able to move them around? 什么是动
svg 自适应父div放大
最新发布
09-03
当设置为 `xMidYMid meet` 时，SVG 会保持其宽高比并尽可能大地填充父容器。 ```html <!DOCTYPE html> .parent-div { width: 500px; height: 500px; border: 1px solid black; } .parent-div svg { ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值