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

最新推荐文章于 2023-05-30 09:27:37 发布
最新推荐文章于 2023-05-30 09:27:37 发布
阅读量2.5k 收藏
点赞数 3
分类专栏： # html5 # d3 # CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ligaoming_123/article/details/93858511
版权
html5 同时被 3 个专栏收录
22 篇文章 2 订阅
订阅专栏
d3
15 篇文章 3 订阅
订阅专栏
CSS
14 篇文章 0 订阅
订阅专栏
  • 背景
<!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等）

pg_li
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html 怎么让div和div中svg的高度一样_用SVG教你画宇智波鼬的万花筒写轮眼
weixin_27758233的博客
12-27 664
不知道大家有没有看过火影忍者这部动漫。相信即使没有看过的小伙伴们也都听说过宇智波一族的写轮眼。在动漫中相比拥有主角光环但是脑回路奇葩的“二柱子”，我更欣赏宇智波鼬。如果说火影中奈良鹿丸是战术大师，那鼬一定就是最强预言家，他的大局观在岸本笔下体现的淋漓尽致：自己背上灭族叛忍的骂名，孤身潜入晓组织暗中保护村子，为的就是给弟弟佐助铺好了一条复兴家族、保护村子的英雄之路，只可惜“二柱子”没脑子。...
如何设置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){
css中高度比img多出4px的问题
weixin_30273931的博客
03-22 424
一句话概括：为什么<a>标签比里面的img高度多出4px 的问题，主要还是由于 img是inline element, it's height is caculated differently as related to the default line-height value. On inline elements, the line-height css property s...
html 怎么让div和div中svg的高度一样_假日 Project：用 Houdini 渲染 …… SVG？
weixin_36378222的博客
12-16 152
原文包含 svg 图案，为获得完整阅读体验请前往 http://www.yuguo.me/houdini/SVGCamera/svg_camera.html有啥用装修网站/生成图标之类的嘛 // Houdini 又遭滥用 (手动笑哭), and it's so much fun!初心做了几个 HDA 之后，感觉画 svg 图标这事很烦，不画呢又对不起自己的审美追求，如果能直接截个图当作图标就好了—...
svg被引用时莫名高度多了4px
weixin_44817180的博客
03-25 457
解决办法： 法1.给svg的外标签加个display：flex 法2.给svg的外标签加height：svg的高度，display：flex
解决div下边距莫名多出4px问题
SiShen654的博客
07-12 731
问题：div下边多出4px 主要是div标签内的留空导致的，解决如下： 将父盒子的文字大小设置为0即可 font-size: 0
SVG
xm2by的博客
06-22 779
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;&
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: '#...
CSS：Div高度、宽度自应等技巧演示文件集合。
11-11
- `auto`值：在CSS中，将Div的高度设置为`auto`可以使它根据内部内容自动调整高度。例如： ```css div { height: auto; } ``` - 使用`display: flex;`或`display: grid;`：Flexbox和Grid布局允许元素根据内容...
HTML5的SVG动画圆点索引按钮焦点图切换特效.zip
07-11
<div class="controls"> <!-- circular line --> <div id="circular-line"> <svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">   ...
HTML5SVG滑块拖动曲线图表代码.zip
07-11
HTML5SVG滑块拖动曲线图表代码是一款可以通过鼠标拖动滑杆来选取需要统计的数据范围曲线图代码。 <... font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> </html>
svg text标签文字超出处理方案
qq_43370509的博客
07-06 1846
svg text标签特殊处理方式
多层SVG嵌套，通过viewBox放大外层SVG时内层会逐渐消失。
Beam
03-16 771
问题： 多层SVG嵌套使用时候，通过设置viewBox控制最外层SVG的缩放，内层会跟着缩放，但是放大到一定程度，内层会逐渐消失。 原因： 内层没有设置高宽！！！ 高宽默认100%，随外层的缩放也在变化，导致外层放大到一定程度，外层高宽小于内层原始高宽，超过部分被遮蔽。 效果对比图： 内层SVG的原始高宽，可用Ai软件打开（文档设置-编辑画板）查阅。 ...
svg教程-初识svg
最新发布
DWX_top的博客
05-30 3240
/在不给 <svg> 设置宽高时，它的默认宽度是 300px ，默认高度是 150px。其实点集完全不需要用逗号隔开，上面的例子中我使用了逗号隔开，完全是为了让自己阅读代码时比价易懂。通过开始点和结束点裁切，可以得到4条弧线，也就是说2个点可以确定2个相同旋转角度的椭圆的位置，可以切出4条弧线。元素上，就会关闭反锯齿功能，突显看起来就会清晰很对，但在某些情况关闭了该功能会让图像看起来有点毛躁的感觉。可以在html中直接使用svg，< svg>< /svg>标签，不需要像canvas在js中操作。
html5网页特效-svg实现不同投票不同表情
web前端开发教程htmlcssjs
11-30 324
特点： 根据不同评分显示不同表情，并且这些表情看起来像是在一个传送带上可以滚动 使用纯代码(svg)绘制表情以及用于评分的星星 html+css，无javascript，上手难度：很简单 笔记 flex 布局使用flex，这是一种自适应屏幕的布局。注意align-items和justify-content也和flex有关。 .container { display: flex; } 星...
SVG画布宽高
qq_32436781的博客
11-05 3053
viewport 表示SVG可见区域的大小。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。 <svg width="500" height="300"></svg> 以上代码定义了一个视区，宽500单位，高300单位； 在SVG中，可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500px，高度为300px。 单位 含义
svg标签如何获取宽度和高度
qq_41700374的博客
11-06 2634
今天，在写一个vue+d3的项目，其中，要获取svg标签的width和height，但是尝试了网上很多方法， 比如： 其中，svg为已经得到的svg元素， let width = svg.style.width //失效 let width = svg.offsetWidth //失效 let width = svg.getBBox() //失效 后面，在国外的网站上看到一个方法，...
ngx-echarts遇到的坑
pgLi
05-10 8986
1、ngx-echarts版本问题导致的问题 2、高度传值传不进去   解决方式： &lt;div echarts [loading]="loading" [loadingOpts]="getLoadingOpts()" [options]= "option" [initOpts]= "opts" [merge]="updateOptions" ..
在div中添加svg怎么放在div中间，用d3
05-19
要将SVG元素居中放置在DIV元素中，可以使用CSS样式来实现。首先，需要将DIV元素设置为相对定位，然后将SVG元素设置为绝对定位，并在CSS中使用`top`和`left`属性来将SVG元素居中放置在DIV元素中。 使用D3.js可以通过以下方式实现： ```js // 获取SVG元素并设置其宽度和高度 var svg = d3.select("#my-svg") .attr("width", "100%") .attr("height", "100%"); // 获取DIV元素并设置其为相对定位 var div = d3.select("#my-div") .style("position", "relative"); // 获取SVG元素的宽度和高度 var svgWidth = svg.node().getBoundingClientRect().width; var svgHeight = svg.node().getBoundingClientRect().height; // 将SVG元素设置为绝对定位，并将其居中放置在DIV元素中 svg.style("position", "absolute") .style("top", (div.node().getBoundingClientRect().height - svgHeight) / 2 + "px") .style("left", (div.node().getBoundingClientRect().width - svgWidth) / 2 + "px"); ``` 其中，`#my-svg`和`#my-div`是SVG元素和DIV元素的ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值