为什么浏览器要在svg元素周围添加填充，如何防止？
浏览器在渲染SVG元素时，会默认在元素周围添加一定的填充。这是因为SVG元素的边界框（bounding box）是根据元素的路径和属性计算得出的，而填充可以确保元素的边界框能够完全包含元素的内容。
填充的添加可能会导致一些不希望的效果，比如元素之间的间距增大或者元素与其他元素重叠。为了防止这种情况发生，可以采取以下方法：
- 使用CSS样式控制填充：可以通过设置SVG元素的样式属性来控制填充的大小和颜色。例如，可以使用CSS的
padding属性来控制填充的大小，使用background-color属性来控制填充的颜色。 - 使用SVG属性控制填充：SVG元素本身也提供了一些属性来控制填充，比如
padding属性可以用来设置填充的大小，fill属性可以用来设置填充的颜色。 - 使用视口（viewport）属性控制填充：SVG元素的视口属性可以用来控制元素的显示区域，通过设置视口属性，可以使元素的边界框与内容紧密贴合，从而避免填充的添加。
需要注意的是，不同的浏览器对SVG元素的填充处理可能存在差异，因此在开发过程中需要进行兼容性测试，并根据具体情况选择合适的方法来控制填充。
推荐的腾讯云相关产品：腾讯云云服务器（ECS），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
出于各种原因(例如打印)，我尝试使用svg元素来实现这一点，如下所示： <div class="svg-test"> <rect x="0" y="0" width="100%"100%" height="100%"></rect></div> 使用简单
浏览 22提问于2019-04-06得票数 1
回答已采纳
我正在使用一个包含国家国旗的大型svg，例如 <g fill-rule="evenodd" stroke-width<svg class="icon flag-be"><use href="#flag-be"></use></svg>
但是，我想在标志周围<
浏览 0提问于2018-08-28得票数 1
回答已采纳
我目前正在使用d3.js制作散点图，它与此链接中的内容非常相似：
svg{}yAxi
浏览 1提问于2012-08-30得票数 1
3回答
我有一个网页，其中有SVG之上的IMG元素，应该绘制形状在它上面。 (固定标记，添加圆圈) FF，Chrome："svg收到鼠标向下“(正确)当图像通过CSS可见性或显示: none隐藏时，它开始工作，但这种方式当然不能使用如何将SVG元素置于IMG元素之上，以便它能够接收事件？(在Opera，IE9中)
谢谢
浏览 1提问于2012-04-10得票数 6
回答已采纳
6回答
我似乎不明白为什么Firefox使用默认的svg颜色而不是类的fill。以下是查看FF检查器时的3个填充：SVG正在通过 <use xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#menu-bag"></use>
</s
浏览 6提问于2015-01-09得票数 16
回答已采纳
3回答
在HTML/CSS领域，有没有可能以编程方式在SVG图像上绘制一条线？谢谢<html> xmlns:xlink="http://www.w3.org/1999line x1="300" y1="0" x2="0" y2="300
浏览 1提问于2011-07-07得票数 1
回答已采纳
1回答
我正在研究如何以一种响应式的方式添加外部SVG文件，并爱上了，因为它不需要JavaScript。
( SVG已经使用冲刷进行了“清洗”，因此剥离了高度/宽度属性，并按照建议添加了viewBox。)问题是，这种技术似乎需要在image标记上使用height和width属性才能起作用，但该标记没有响应。使SVG响应，但是不正确地呈现<image>元素(或者，无论如何都不是预期的)。可以通过添加pre
浏览 1提问于2014-01-29得票数 1
元素。我读到，那些flow*元素作为SVG1.2标准的一部分，实际上没有在大多数浏览器中实现，因为SVG1.2从来没有被任何人接受过。这就解释了为什么我们的地图上的文字没有多少诱惑力就会出现。如果您的SVG要在浏览器中查看，通常建议使用<text>而不是<flowPara>
这揭示了一个我无法从谷歌搜索中找到答案的更深层次的问题: Inkscape正在用它可以呈现的其他垃圾填充文档(问
浏览 5提问于2015-04-10得票数 8
回答已采纳
这不管用：const svg = document.createElement('svg')svg.setAttribute((rect)这将起作用：const svg = document.createElementNS('http://www.w3.org/2000/svg',
浏览 1提问于2019-09-11得票数 5
回答已采纳
当我从使用png图像切换到SVG时，我刚刚开始得到这个错误。我使用ImageMagick创建了SVG映像，以在另一个域中的Linux机器上转换png映像。这会导致这件事吗？我在SVG文件头中看不到任何标识它来自何处的内容。
浏览 3提问于2015-07-09得票数 0
回答已采纳
我使用在舞台上添加一个SVG。这是在Adobe动画HTML5画布中，它使用Create.js/Easel.js框架。该项目正在使用响应性布局。
并通过拖动(而不是缩放.)缩小浏览器的大小。viewBox="0 0 151.5 163.7"
它显示了SVG的正确宽度和高度，但是
浏览 3提问于2022-04-08得票数 1
我想利用现有的SVG模式库(例如)，而不必重构它们。但我很难理解如何导入原始SVG字符串。文档展示了如何在画布上放置一些东西，但是在JSFiddle中的一个小时之后，我无法让它加载一个模式。复制完整的SVG代码，并将其放在答案中提到的draw.defs().svg(...)行中。最终代码：var draw = SVG('drawing')
// D
浏览 2提问于2019-01-27得票数 0
回答已采纳
2回答
我相信解决方案是在两个SVG切片中都有完整的较小的插图，这样无论读取哪个片段，都会出现整个较小的图解，但是还没有找到确保这一点的方法。我试过将较小的插图分组，但这似乎行不通。
浏览 4提问于2014-02-25得票数 0
div style="background-color:red;"></div>
页边距周围的间距为12px，但我原以为父元素的红色背景会显示在顶部和底部的12px空格中，而不是只显示“空白”。
浏览 0提问于2012-02-15得票数 0
回答已采纳
我遇到过这样一个问题:给定一个HTML页面，页面中嵌入了几个SVG文件，SVG中的CSS是在页面级别解释的，而不是在SVG对象本身内部解释的。:green; }</style></svg>
<svg id="svg-two"
浏览 0提问于2013-11-20得票数 4
1回答
目前，我的imageButtons显示的图像周围有非常不受欢迎的填充。如何去掉填充，只使用图像作为按钮。android:layout_width="wrap_content" />
其次，如何将链接添加到要在浏览器
浏览 3提问于2011-06-17得票数 0
回答已采纳
.window{ width: 150px; background-color: #424242svg{<div class="window"> <a href="https://www.google.com" target="_blank">
<svgwidth=
浏览 0提问于2018-04-13得票数 3
回答已采纳
我选择SVG是因为我需要在浏览器中显示结果并生成这个服务器端。我尝试的每一种方法都到了死胡同：
这不允许我在剪裁区域周围增加一次笔划，这是我所需要的。第二个解决办法似乎是：
对元素进行分组并使用该组两次:一次在
浏览 4提问于2021-10-30得票数 0
回答已采纳
在下面的场景中，Safari如何确定输出svg的大小； viewBox 0 0 800 800 width 100% svg width 100%Safari输出的svg比屏幕的60%小得多，好吧，这是一个bug。但是，是什么决定了这个更小的svg的大小，它与我能想到的任何东西都没有关系。
只是为了提供一些背景信息。Safari需要px中的宽度和高度来做你想做的事情。不起作用。但是它确实
浏览 3提问于2012-04-23得票数 1
3回答
我正在使用SVG教程，我只是简单地加载了一个图像，如下所示：<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/
浏览 206提问于2012-09-18得票数 41
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
