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

为什么在IE11中渲染时,连续绘制的SVG矩形的间距和宽度会不均匀?

在IE11中渲染时,连续绘制的SVG矩形的间距和宽度不均匀的原因可能是由于浏览器的渲染机制和SVG的特性导致的。

  1. 渲染机制:IE11使用的是旧的渲染引擎,可能存在一些不完善或不兼容的特性。这可能导致在渲染连续绘制的SVG矩形时,浏览器无法准确地计算和绘制矩形的位置和大小,从而导致间距和宽度不均匀。
  2. SVG特性:SVG是一种基于XML的矢量图形格式,它具有丰富的特性和灵活性。在连续绘制的SVG矩形中,可能存在一些特性或属性设置不一致,例如矩形的位置、大小、填充、边框等,这些不一致的设置可能会导致渲染结果不均匀。

为了解决这个问题,可以尝试以下方法:

  1. 使用固定的间距和宽度:在绘制SVG矩形时,可以明确指定每个矩形的间距和宽度,而不依赖于浏览器的计算。这样可以确保矩形的间距和宽度始终保持一致。
  2. 使用CSS样式:通过使用CSS样式来定义SVG矩形的样式,可以更精确地控制矩形的位置和大小。可以使用CSS的marginpadding属性来设置矩形的间距,使用widthheight属性来设置矩形的宽度和高度。
  3. 使用SVG库或框架:使用一些专门的SVG库或框架,如D3.js、Snap.svg等,可以简化SVG的操作和管理,并提供更好的兼容性和渲染效果。

腾讯云相关产品和产品介绍链接地址:

腾讯云提供了一系列云计算相关的产品和服务,包括云服务器、云数据库、云存储等。您可以访问腾讯云官网了解更多详情:https://cloud.tencent.com/

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

相关·内容

手把手带你上手D3.js数据可视化系列(二)手把手带你上手D3.js数据可视化系列(二)

文章最后留下一个疑问,就是能否基于数据集大小画布大小来自动计算出每个rect宽高间距,然后自动布局? 正好古柳之前啃大西洋手抄本可视化作品源码看到了相关实现方法,这里就和大家分享下。...;另外 colors 颜色数组不变,绘制矩形仍会通过取余数方式来取对应颜色,以后也介绍颜色比例尺,将类别属性进行映射到对应颜色,到时候再说。...而且后面实际绘制矩形,就会发现确实是矩形实际高度为实际宽度1.5倍,而不是整体高度为整体宽度1.5倍,所以可知这里是近似后,应该就是为了简化计算。...绘制矩形 算出矩形实际宽度 rectWidth 后,高度也就知道了;这里重新设置空白间距 rectTotalMargin,然后得到带间距矩形整体宽高 rectTotalWidth rectTotalHeight...;接着容器宽度除以单个矩形整体宽度,并向下取整,就是每行最后矩形个数 columnNum;最后绘制矩形同样用这三个步骤 svg.selectAll('rect').data(dataset).join(

3.1K10
  • 创建canvas设置canvas尺寸绘制图形Canvas库

    20, 150, 100); 效果: image.png 3、清空矩形区域(clearRect) 当要重绘canvas内容(比如动画),我们需要先使用 clearRect(x, y, width...maxWidth]) 方法,参数 text 表示绘制文字;x, y 为文字起点坐标;maxWidth 为可选参数,表示文字最大宽度,如果文字超过该最大宽度那么浏览器将会通过调整字间距、字体或者压缩文字来适应最大宽度...矩形 使用Path也可以绘制矩形 fillRect、strokeRect一样效果,但是多一个步骤。...canvas上绘制图片宽度 dHeight: canvas上绘制图片高度 sx: 原始图片上水平方向裁剪起点 sy: 原始图片上垂直方向裁剪起点 sWidth: 原始图片上水平方向裁剪宽度...该库还提供了Canvas 2D,SVGCSS3D渲染器 D3.js: D3.js是一个JavaScript库,用于根据数据处理文档。

    4.5K10

    【D3.js - v5.x】(2)绘图 | 比例尺 | 坐标轴 | 柱状图 | 过渡

    绘制矩形 本文绘制一个横向柱形图。只绘制矩形,不绘制文字坐标轴。 SVG 矩形元素标签是 rect。...矩形属性,常用有四个: x:矩形左上角 x 坐标; y:矩形左上角 y 坐标; width:矩形宽度; height:矩形高度; 要注意, SVG ,x 轴正方向是水平向右...比例尺 比例尺是 D3 很重要一个概念,为什么需要比例尺: 上一章制作了一个柱形图,当时有一个数组: var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 绘图...因此,才有这样用法:linear(0.9)。 序数比例尺 有时候,定义域值域不一定是连续。...**坐标轴 SVG 是没有现成图形元素,**需要用其他元素组合构成。 D3 提供了坐标轴组件,如此 SVG 画布绘制坐标轴变得像添加一个普通元素一样简单。

    70520

    前端进阶|在手机上画一条1px细线,为什么这么难?

    写到这里,似乎还没有讲清“为什么1px线高清屏下更宽”这个问题。 将高清屏下像素映射关系代入1px线场景,会发现:2倍屏下线宽是2个物理像素,3倍屏下是3个。...数学中有个概念:线是没有宽度,点是没有大小。像素同样是没有大小。 2倍屏物理像素密度是普通屏两倍,并不是每一个物理像素大小是普通屏1/4,而是物理像素间距是普通屏间距1/2。...最简单粗暴方式:2倍屏下将1px细线写成border:0.5px。但这种方法只iOS上支持,安卓上会显示成被当成0px处理。 更通用方案,有svg伪类元素两种。...SVG方案 SVG指的是矢量图,具体代码作为xml标签组装在html文件。...因为不占空间,它会以图形边界为中心画线,一条线一半宽度矩形内,一半矩形外。而视口大小正好就是矩形大小,看到线宽就只有一半了。

    94110

    【Web技术】929- 前端海报生成不同方案优劣

    一直想要整理一下,但这个过程思考遇到问题没有记录下来,比如图片跨域问题,文字问题,做完没有记录,无迹可寻,以至于很难开始。...SVGWeb攻击中应用: https://www.anquanke.com/post... 2.iOS14.2下,图片丢失问题 其实在测时候,发现ios14.2下生成图片第一次始终会出现图片丢失,...; 2.文字 2.2文字换行 核心:计算所有文字,根据每行可显示最大宽度,来拆分成每行渲染 参考:https://www.zhangxinxu.com/wordpress/2018/02/canvas-text-break-line-letter-spacing-vertical...优点 不需要考虑兼容性等问题 缺点 不支持字数或字体类型过多,服务器压力较大(看具体实现方案),元素越多,接口越慢 这个方案其实也是用后端逻辑实现了绘制元素,输出图片(过程遇到问题:如换行情况下需要计算字体高度...(同一字体中英文宽度不同)后续元素相对位置发生变化) 四、图片跨域 如果存在跨域图片无法下载,仔细阅读以下文字: 来源:https://segmentfault.com/q/10... ?

    1.5K40

    手把手带你上手D3.js数据可视化系列(三)手把手带你上手D3.js数据可视化系列(三)

    field,将其 fieldCountArray 索引作为 fieldId 设置到原始数据集上,这样就能对数据集也按照分区数量降序排序,否则因为本次分区较多、后面颜色也多,如果随机排列,过于花哨不好识别...添加完 SVG 画布后,通过给 SVG 添加一个 g 元素,即 group,然后将其水平向右垂直向下平移相应像素,这样后续 g 里绘制元素其坐标原点就是图中框选区域左上角开始,而不是画布左上角开始...这里矩形宽度 rectWidth 为50px,高度 rectHeight 为80px,矩形上下左右间距为10px,每行最多17个矩形;通过取余取整操作指定每个矩形坐标就能布局好。...注意这里是已经水平垂直整体平移过 bounds 元素里添加而不是 svg 里添加;并且先添加了一个组 g,以便其他区域区分开。...另外上面也说了比例尺其实就是个函数,所以直接设置矩形宽度,直接调用 legendWidthScale() 并传入数据集里每项分区数值即可。

    2.4K20

    剖析 Figma 数据结构:不同图形特有属性

    所以计算,需要将弧度转换到 (-2*PI, 2*PI] 区间,再转为角度。...线 LINE 矢量网格图形近亲,也有一个 vectorData 保存一些矢量信息。 对于线条,一般来说往两边扩展宽度绘制宽度线段(Canvas 2D SVG 都是)。...这样坐标 1 位置绘制 1px 线条,导致 跨越多行像素 情况,为了看起来不这么粗,就要做抗锯齿,使用半透明像素去填充多行像素点,但却导致线条会看起来有些点模糊,给用户一种低画质感觉。...:字体元信息,比如字重; ... letterSpacing:字间距; autoRename:自动重命名,默认为 true,此时图形名称自定跟随文本内容更新; textAutoResize:文字是有一个包围矩形...默认为 WIDTH_AND_HEIGHT(宽高自动根据文字内容换行适应),此外还有 HEIGHT(宽度固定,高度自适应)、NONE(文字内容不会改变矩形宽高,必要时会溢出矩形) 结尾 这些就是 Figma

    35110

    SVG与foreignObject元素

    SVG图像由基本形状(如线段、曲线、矩形、圆形等)路径组成,还可以包含文本、渐变、图案图像剪裁等元素。...SVGtext元素提供了基本文本渲染功能,可以指定位置绘制单行或多行文本,然而SVG并没有提供像HTMLCSS强大布局功能,比如文本自动换行、对齐方式等,这意味着SVG实现复杂文本布局需要手动计算调整位置...,举个例子如果我想批量生成一些SVG,那么人工单独调整文本是不太可能,当然在这个例子我们还是可以批量去计算文字宽度来控制换行,但是我们更希望是有一种通用能力来解决这个问题。...此外标签不能直接放在标签内部,其具有严格嵌套规则,标签是一个独立元素,用于SVG画布上绘制文本,而标签是用于绘制矩形元素,所以绘制矩形并没有限制文本展示范围... 当我们打开DrawIO绘制流程图,其实也能发现其绘制文本使用就是<foreignObject

    52260

    Draw Text in Deep

    间距(leading) TextView间距调整设置是通过setLineSpacing(add, mult)方法,xml,可以通过lineSpacingExtralineSpacingMultiplier...字符间距(kerning) 对于textViewPaint绘制Text,可以分别使用各自类getLetterSpacing()setLetterSpacing()方法获取设置字符间距,对于TextView...getTextBounds() 获取文字实际显示范围。这个API返回是当前绘制文字最小矩形,即能完全包裹文字矩形范围。...getTextWidths() 这个API返回数组,包含了每个字符实际宽度排版,这个宽度也叫“advance width”。它们累加,即为measureText返回长度。...文字渲染Layout Android,文字渲染基类是Layout类,它包含了文字测量、渲染布局所有功能,Layout类有几个子类: BoringLayout StaticLayout DynamicLayout

    1.4K30

    使用JavaScriptD3.js实现数据可视化

    全称是Data-Driven Documents(数据驱动文档),并且它被称为一个互动动态数据可视化库网络。2011年2月首次发布,撰写本文,最新稳定版本是4.4版本,并且不断更新。...D3利用可缩放矢量图形或SVG格式,允许您渲染可放大或缩小形状,线条填充,而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。...尽管你将使用CSS来进行D3样式设定,但值得注意是,很多在HTML上使用标准CSSSVG使用方式不一样-也就是说,你会用stroke,而不是border,使用fill而不是color。...回到我们JavaScript文件,我们可以将属性链接到SVG,使其成为网页完整高度宽度。我们将.attr()用于属性。为了让它更具可读性。确保将分号向下移动到变量声明末尾。...设置形状属性 我们可以通过使用.attr(),与为SVG定义属性相同方式向形状添加属性。D3每个形状将具有不同属性,具体取决于它们定义绘制方式。

    21.8K30

    【面试题】104道 CSS 面试题,助你查漏补缺(下)

    (6)SVG是无损、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们方法组成。当你放大一个SVG图 片时候,你看到还是线和曲线,而不会出现像素点。...这意味着SVG图片在放大,不会失真,所以它非常适合用来绘制企 业Logo、Icon等。 (7)WebP是谷歌开发一种新图片格式,WebP是同时支持有损无损压缩、使用直接色、点阵图。...(6)第六种格式是svg格式,它是矢量图,它记录图片绘制方式,因此对矢量图进行放大和缩小不会产生锯齿失真。它一般 适合于用来制作一些网站logo或者图标之类图片。...如果想让英文字符中文一样,每一个字符都用最小宽度单元,可以试试使用CSSword-break:break-all。 69.为什么 height:100%无效?...“幽灵空白节点”是内联盒模型中非常重要一个概念,具体指的是:HTML5文档声明,内联元素所有解析渲染表现就如同 每个行框盒子前面有一个“空白节点”一样。

    2.5K40

    聊聊 19.7k Star canvas 绘图神器 fabric.js

    Fabric.js 是一个强大而简单 Javascript HTML5 画布库 Fabric 画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas( canvas-to-SVG...: "green", //填充颜色 width: 200, //矩形宽度 height: 200, //矩形高度 }); // 将矩形添加到canvas画布上 canvas.add(...rect); 可以看到界面填充了一个可以通过鼠标放大缩小且可以旋转绿色矩形 通过对象形式配置元素样式,非常方便!...当我们调用 applyFilters ,“filters”数组存在任何滤镜将逐个应用,所以让我们尝试创建一个既色偏又明亮(Brightness)图像。...行高 Line Height 使用多行文本时有用。 字符间距 Char spacing 使文本更紧凑或更间隔。 子范围 Subranges 将颜色属性应用到文本对象子对象

    3.5K21

    手把手带你上手D3.js数据可视化系列(一)手把手带你上手D3.js数据可视化系列(一)

    ,很简单 CSS 选择器用法; 接着通过 append 添加 svg 元素,然后设置其宽高背景色,这里为了演示方便,设置成浏览器网页窗口高度全部宽度一半,大家也可以撑满网页窗口,或者用固定大小如...') 其中 window.innerWidth window.innerHeight 就是网页窗口某一大小打开宽高,即图中红框部分,并且可以看到画布占了一半大小。...x 坐标的计算公式是 20 + d * 70,这里希望每一行最后一个矩形整体都在画布内,即 x 坐标加上矩形宽度要小于画布宽度。...也许可以缩小矩形宽高,然后调节间距一步步搞定。...rect宽高间距,然后自动布局呢?

    4.4K20

    104道 CSS 面试题,助你查漏补缺(下)

    (6)SVG是无损、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们方法组成。当你放大一个SVG图 片时候,你看到还是线和曲线,而不会出现像素点。...这意味着SVG图片在放大,不会失真,所以它非常适合用来绘制企 业Logo、Icon等。 (7)WebP是谷歌开发一种新图片格式,WebP是同时支持有损无损压缩、使用直接色、点阵图。...(6)第六种格式是svg格式,它是矢量图,它记录图片绘制方式,因此对矢量图进行放大和缩小不会产生锯齿失真。它一般 适合于用来制作一些网站logo或者图标之类图片。...如果想让英文字符中文一样,每一个字符都用最小宽度单元,可以试试使用CSSword-break:break-all。 69.为什么 height:100%无效?...“幽灵空白节点”是内联盒模型中非常重要一个概念,具体指的是:HTML5文档声明,内联元素所有解析渲染表现就如同 每个行框盒子前面有一个“空白节点”一样。

    2.4K30

    40个重要HTML 5面试问题及答案

    SVG是什么? 能否使用HTML 5举个简单SVG例子? HTML 5Canvas画布是什么? 如何在HTML 5使用CanvasSVG绘制矩形? CSS选择器是什么?... 注: 从前面的两个问题中我们可以看到画布SVG都可以浏览器上绘制图形。所以在这个问题上面试官可能会要你回答什么时候用哪个。 SVG Canvas 绘制并记忆。...换句话说就是,通过使用SVG绘制任意形状都可以被记住操作,并且浏览器可以再次渲染它。SVG可以很好地用于创建如CAD软件图形,绘制之后允许用户操作。...如何在HTML 5使用CanvasSVG绘制矩形? 使用SVG绘制矩形HTML 5代码。...边框可以可见,也可以不可见,可以定义它高度宽度等。 Padding:——定义边框元素之间间距。 Margin:——定义边框任何相邻元素之间间距。 ?

    4.8K130

    HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    beginPath() 清空子路径,一般用于开始路径创建。几次循环地创建路径过程,每次开始创建都要调用beginPath函数。 closePath() 如果当前子路径是打开,就关闭它。...否则把子路径最后一个点路径第一个点连接起来,形成闭合回路。...1.3、绘制矩形 context.strokeRect(x,y,width,height) 以x,y为左上角,绘制宽度为width,高度为height矩形。...2.0一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来浏览器里更流畅地展示3D场景模型了,还能创建复杂导航和数据视觉化...也不会再有字体限制,用户系统即使没有安装某一字体,也会看到和他们制作完全相同画面。 3.较小文件 总体来讲,SVG文件比那些GIFJPEG格式文件要小很多,因而下载也很快。

    9.6K100

    解锁前端难题:亲手实现一个图片标注工具

    「缺点」: 处理大型图片复杂图形,性能可能不如 Canvas。 SVG 元素数量过多时,可能影响页面性能。...「可能遇到困难」: 实现复杂图形效果,可能需要较多 SVG 知识技巧。 管理大量 SVG 元素事件可能会使代码变得复杂。...这里需要注意开头结尾 save restore 函数,因为我们修改 scale,如果不恢复的话,其影响下一次绘制,一般修改上下文,都是通过 save restore 来复原。...这意味着,如果你将缩放比例设置为 2,那么在这个缩放坐标系统绘制一个宽度为 50 像素矩形,实际上会在画布上产生一个宽度为 100 像素矩形。...首先,我们需要实现编辑器渲染逻辑。我们可以 drawEditor 函数添加代码来绘制这些小方块。

    68710
    领券