如何在SVG中去除不需要的细边框？不同的行为(IE、Chrome等)
在SVG中去除不需要的细边框可以通过以下方法实现：
- 使用CSS样式：可以通过设置SVG元素的stroke属性为"none"或者"transparent"来去除边框。例如，可以使用以下样式来去除所有SVG元素的边框：
svg {
stroke: none;
}或者
svg {
stroke: transparent;
}如果只想去除特定元素的边框，可以使用CSS选择器来选择该元素并设置其stroke属性。
- 使用属性：可以直接在SVG元素中添加属性来去除边框。例如，可以使用以下属性来去除一个矩形元素的边框：
<rect x="0" y="0" width="100" height="100" stroke="none" />或者
<rect x="0" y="0" width="100" height="100" stroke="transparent" />同样，可以根据需要选择特定的SVG元素并设置其stroke属性。
需要注意的是，不同的浏览器可能对SVG的渲染有不同的行为。例如，IE浏览器可能需要使用VML（矢量标记语言）来渲染SVG，而不是直接支持SVG。因此，在处理SVG时，需要考虑不同浏览器的兼容性。
推荐的腾讯云相关产品：腾讯云图像处理（Image Processing）服务可以用于处理SVG图像，包括去除边框、调整大小、裁剪等操作。详情请参考腾讯云图像处理产品介绍：https://cloud.tencent.com/product/imgpro
相关·内容
2回答
我需要用IE8、IE9和Chrome打印一页。它在Chrome中打印得很好，在IE8中也没有那么好(还没有测试过IE9 )。
我现在在IE中面临的三个主要问题是：
复选框和单选按钮宽度混乱，并有边框。
整个表单的额外填充，特别是标签和字段之间的填充。
不显示内部表边框，应该隐藏第一列。
请看下面的截图。为什么会发生这种情况？我似乎无法修复它，我已经尝试了几次更改css。我知道它是在读CSS。
复选框：
额外填充无处不在：
没有内部表边框：
更新：
表单正确显示(表格边框显示，填充正确，等等)在Chrome和IE中。它在Chrome中打印正确。它不能在I
浏览 1提问于2013-04-04得票数 0
回答已采纳
1回答
如果浏览器的最低支持是IE9、Chrome16、FF13、Safari5.1.&Opera10，那么用HTML/JavaScript创建图形的最佳方法是什么？SVG还是Canvas？
？
浏览 0提问于2012-07-31得票数 0
回答已采纳
1回答
我有一个DIV图像，我是作为一个按钮的风格。为此，我使用两个背景图像(SVG格式)和一个边框(为了调试目的，边框非常大)。我要在边界下显示背景图像。模拟CSS：
.element {
background: url(bg1.svg) no-repeat,
url(bg2.svg) no-repeat;
background-clip:border-box, border-box;
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-size: cover, cover;
bord
浏览 5提问于2013-06-01得票数 1
回答已采纳
2回答
我在为我的网站项目显示SVG徽标图像时遇到了问题：
我可以看到在矢量物体的边缘(边框)周围有一条很薄的暗线。它似乎在曲线上很流行。这里没有边框，至少当它是在Illustrator上创建的时候，也没有隐藏在下面的其他深色物体。
据我所测试，在火狐、Safari、IE11上似乎没什么问题，但对于Chrome(v43)和(V4.2)就不行了。
编辑:我在这里做了一个样本。它在方形背景物体上有'S‘形的橙色物体，颜色完全相同。这里没有东西有边框。这是在Illustrator CS3上创建的，我创建的SVG文件与最初为我的项目所做的相同。
下面是截图比较：
小提琴：
下面是在本
浏览 2提问于2015-05-31得票数 3
回答已采纳
我正在使用
然而，当在IE中查看网站时，菜单选项周围有一个黑框，而且下拉菜单按钮看起来也不同。
如果你先用IE再用Chrome查看网站的，你就会看到不同之处。
我附上一些截图，也强调了这个问题。
如何通过使IE看起来像Chrome来解决此问题？
以下是菜单在Chrome中的外观
以下是这些选项在Chrome中的外观
这是IE中菜单的外观(带箭头的丑陋方块)
这是IE中选项的外观(丑陋的粗边框)
浏览 4提问于2014-07-18得票数 3
1回答
以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Test.</title>
</head>
<body>
<div style="border: solid 1px black; height:100px; width:100px">
<svg height="100" width="100" viewbox="
浏览 0提问于2011-05-12得票数 10
回答已采纳
如何在IE11中删除Object SVG中的轮廓/边框
我试着使用border:0 & outline: 0，但它不起作用。只有在IE中才有外来者..我需要在文本SVG内容下面加上边框
<object> SVG Content
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
浏览 0提问于2018-12-11得票数 2
1回答
我正在实现一个搜索字段，它由一个输入字段和一个svg图标组成。以下是浏览器在Chrome、Firefox和IE11中的当前行为
Chrome -理想版本的
火狐
IE11 (wtf)
<div class="input-wrap">
<input placeholder="Search…" />
<div class="icon">
<svg viewBox="0 0 100 100">
<g transform="sc
浏览 0提问于2018-11-07得票数 0
我有个问题。我的客户希望他们的一个网站显示为GG chrome，而不是IE (他们以前通常使用IE )。最近的一个问题是GG中的inputText没有边框，而IE中却有边框。所以我的客户想让边框在GG Chrome中可见。我该怎么做呢？
浏览 13提问于2019-04-12得票数 0
2回答
圆边框进度条
、、、
如何使用CSS创建这个循环进度条(兼容IE10+、FF、chrome、safari.)？
我想我们可以用SVG来做这个，但是我不知道怎么做。
在圆圈周围，有一个小的边框或阴影，根据进度百分比动态变化。如果百分比是100%，边框将完全围绕圆圈填充进度条。
浏览 3提问于2017-01-11得票数 2
回答已采纳
1回答
我有一个简单的HTML：
<html>
<body>
<embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
</body>
</html>
还有一个简单的SVG：
<svg xmlns="http://www.w3.org/2000/svg" version="1.
浏览 3提问于2017-01-19得票数 2
回答已采纳
body {
background: yellow;
border: 2px solid blue;
height: 150px;
}
.flex {
border: 2px solid red;
display: flex;
}
<div class="flex">
<img src="https://www.w3.org/Icons/SVG/svg-logo.svg">
</div>
我已经构建了一个只包含一个弹性项目的flex盒，它是一个图像元素。当使用桌面Chrome和桌面Chr
浏览 6提问于2020-07-04得票数 0
下面是我的iPhone 5s Safari的截图：
前两个 SVG图标显示为<object>。
<object data="/svg/tabbar/tab_1_active.svg" type="image/svg+xml"></object>
第三 SVG图标显示为<img>
<img src="/svg/tabbar/tab_1_active.svg">
第四 SVG图标显示为inline css background。
background: url("data:
浏览 0提问于2016-05-25得票数 0
回答已采纳
3回答
现代Internet (8-11)的所有版本都在显示一个“：后置”伪元素，里面有一个背景图像，非常奇怪。它应该是一条直线的圆点，直下到顶部，作为“心脏监测点”的延续。相反，他们是这样出现的：
以下是站点本身：
背景图像本身是一个svg，我知道并不是所有IEs都完全支持它，但是根据我在BrowserStack上的测试，它正在上传，并在IE9、10和11中显示得很好。
在BrowserStack上的IE控制台中，在元素被完全删除之后，就好像IE正在发现它们的错误一样，而这些点正在不均匀地显示出来(如上图所示)。我确实有多个伪元素在那里，因为该网站是移动响应。
Chrome，Firefox
浏览 4提问于2014-11-24得票数 1
回答已采纳
1回答
考虑以下svg代码：
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<path d="M 180 100 C 180 105 180 120 182 120 " stroke="black" fill="none" stroke-width="3"></path>
</svg>
我的浏览器(chrome)将其呈现如下。注意路径末尾的奇怪的&
浏览 2提问于2020-05-01得票数 1
回答已采纳
3回答
Chrome似乎是从页边距的内侧测量元素的宽度，但Firefox和IE测量的是边框的宽度(不包括内边距而不是内边距)。从边框测量元素的宽度对我来说是有意义的，而且在编码时也很有帮助，因为打开边框可以很容易地看到元素的宽度，但我的问题是CSS规范说什么是测量元素宽度的正确方法，如果chrome是错误的，或者IE和Firefox是错误的
谢谢你的帮忙
浏览 4提问于2010-01-20得票数 4
回答已采纳
1回答
我正在使用D3构建一个交互式时间线。在SVG画布周围，我放置了黑线作为可视边框。现在，在Firefox和Edge中，当我将其x1和x2值设置为0时，左侧边框是不可见的，而在Chrome中则会显示它(参见下面的代码片段)。一种解决方案是始终将其设置为1，但在Chrome中，其他元素可以在此边框的左侧可见，这是不可取的。我如何使我的代码适应客户端浏览器？问如何检测Chrome，但答案似乎相当棘手。这里有使用特征检测的方法吗？
var svg = d3.select("body").append("svg");
var w = 500, h = 200;
var
浏览 5提问于2016-04-11得票数 0
回答已采纳
这对我来说真的是令人费解。
下面页面上的某些元素在Chrome/Firefox和IE中呈现不同，特别是边框半径和按钮。
它可以在Chrome/Firefox中正确渲染，但不能在IE中正确渲染。
有什么想法吗？
(选择列表和电子邮件表单页脚在IE中无法正确呈现)
即：
Chrome/Firefox：
浏览 2提问于2015-03-31得票数 0
1回答
我有一些css代码，用于html页面，如下所示
<style>
body{
border-width: 8px;
border-style: solid;
border-color: #045FB4;
margin:0px;
}
</style>
在IE和Chrome中，它显示的正是我使用页面作为弹出到我的网站的确切时间。但是，如果我在firefox中使用相同的页面，它的底部边框不是底部，而是8%以上，意思是不精确角。
如果我使用firefox显示页面，我需要建议如何设置边框。
我试过了
浏览 2提问于2014-03-13得票数 0
回答已采纳
我有以下HTML代码：
<!DOCTYPE html>
...
<div id="body">
<svg version="1.1" ...>
<defs>
<svg id="svgelid" width="24" height="24" x="0" y="0" version="1.1">
<rect x="0&#
浏览 3提问于2014-08-20得票数 3
4回答
我有一个非常简单的加载动画，可以在火狐和Chrome上完美地工作，但在IE11中它不能显示SVG图形。
下面是完整的示例：
SVG：
<svg class="circular-loader" viewBox="25 25 50 50">
<circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10&
浏览 0提问于2015-11-20得票数 30
在Internet Explorer中获取所单击元素的边框颜色时出现问题。
$("#clickme").click(function() {
alert($(this).css('border-color'));
});
这是jsfiddle：
它可以在chrome中工作，但不能在IE10中工作。
有什么办法让它两者都能用吗？同样更改为“边框”，在chrome中它给了我2px solid rgb(0, 0, 0)，但在Ie中我仍然得到空的警告。
PS。是的，我试过"borderColor“。在IE中也不起作用
浏览 0提问于2013-03-29得票数 13
回答已采纳
我使用图像为IE浏览器提供圆角，但图像的阴影与IE中的实际边框略有不同。但在谷歌Chrome或Firefox中，情况并非如此。
在IE中，图像边角的阴影与边框的其余部分略有不同。我认为这是因为“颜色配置文件”，但我仍然不知道如何解决这个问题。
浏览 3提问于2011-02-24得票数 2
回答已采纳
2回答
假设CSS属性缺少单元(px、em、pt、%)：
<body>
<div
style= "width:170;
border:1 dotted PaleGreen;
background-color:MistyRose">
The quick brown
</div>
</body>
问题：
它为什么会退回到px？像素总是首选的单位吗？在W3C工作草案或建议中是否有任何规定？
是否有一条规则规定UA必须退到首
浏览 3提问于2012-06-30得票数 14
回答已采纳
当我写一些小程序时，我遇到了一个问题。有一个SVG textNode：
textMeasureNode.style.cssText
"font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 22px; font-style: oblique; font-weight: normal; fill: #333333;"
and
textMeasureNode.textContent
"Q1"
当我调用这个函数时：
textMeasureNode.getCompute
浏览 4提问于2015-02-04得票数 15
1回答
似乎Chrome/Firefox不会在tr上渲染边框，但是如果选择器是table tr td，它就会渲染边框。
如何在tr上设置边框？
我的尝试，这不起作用：
table tr {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>
Text
</td>
</tr>
</tbody>
</table>
这是一个类似的问题：，但它似乎适用于除IE以外的所有地方。
浏览 0提问于2013-09-08得票数 142
回答已采纳
3回答
我想移除chrome为任何文本框添加的边框。这是我已经尝试过的html和css。
HTML：
<input id="searchbar" type="search" placeholder="Search" />
CSS：
input[type=search],
input[type=search]:hover,
input[type=search]:focus,
input[type=search]:active
{
border: 0;
outline: none;
outline-offset: 0;
浏览 0提问于2013-04-27得票数 1
回答已采纳
1回答
标记，造型
HTML
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="25" />
</svg>
CSS
svg { width:50px; border:1px solid red; }
示例URL
结果
Firefox 58，Chrome 64
IE 11
问题
我想知道如何像其他浏览器一样在IE中进行渲染？感谢您的阅读。
浏览 0提问于2018-02-26得票数 4
我想了解HTML5.js对于在IE8 中启用HTML5特性有多大帮助
它在IE8中是完全启用还是在某种程度上启用了HTML5？它对边框半径、渐变等CSS3样式有影响吗？
浏览 0提问于2011-10-20得票数 4
在CSS中使用box-sizing: border-box;时，元素的边框包含在总的宽度和高度中。我也使用border-box在父div中将SVG元素设置为100%宽度，当SVG上设置了边框时，似乎存在呈现/大小问题。 我在这个堆栈闪电战中复制了这个问题(使用div元素进行比较)：https://stackblitz.com/edit/typescript-xytlg2 我在Chrome和Firefox中看到了这个问题。在Firefox中，SVG元素的边框延伸到紫色div之后。在Chrome中，它们做同样的事情，但将鼠标悬停在每个SVG上将导致重新计算边界，然后它适合父div。删除box-s
浏览 21提问于2020-07-02得票数 0
回答已采纳
1回答
我很好奇，如果有人能指出正确的方向，我可以做SVG动画，它基本上循环分组元素的可见性，这样基本上就可以通过帧动画获得一个框架。动画代码必须嵌入到svg中，并且必须与IE、Firefox和Chrome兼容。到目前为止，经过无数个小时的尝试不同的事情，我让它只在Chrome上工作。
浏览 1提问于2016-10-27得票数 3
回答已采纳
如果offsetLeft是一个表元素，则offsetParent在IE和Chrome中的行为不同，offsetParent设置了左边框：
IE确实包括边框Chrome不包括边框
JSFIDDLE：
IE: td 3： 210 ，span 3: 210
铬测试结果: td 3：200，span 3: 210
为什么他们的行为不同，有没有办法得到同样的结果？
浏览 1提问于2015-12-31得票数 2
回答已采纳
1回答
我在Internet 9中的SVG徽标导致单击"Internet限制此网页运行脚本或ActiveX控件“。
我尝试过两种不同的方法来加载html中的图像。
<object data="../logo.svg" type="image/svg+xml"></object>
和
<embed src="../logo.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /&
浏览 2提问于2013-09-05得票数 1
回答已采纳
1回答
在除IE11以外的所有浏览器中，当滚动到触发器元素时，此jQuery会将新类running添加到具有paused类的元素中。
触发器元素设置在div上。与Firefox、Safari和Chrome一样，它也添加了这个类。但它的IE11，它似乎没有回升的扳机。
这是否可能是IE11和jQuery .ready的问题？
$(document).ready(function() {
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger1"})
.se
浏览 6提问于2017-06-20得票数 0
我有一个类似于此的HTML/CSS文件。
.window{
position: absolute;
width: 150px;
height: 100px;
background-color: #424242
}
svg{
pointer-events: none;
}
.b{
height: 40px;
width: 40px;
position: absolute;
bottom: 8px;
right: 8px;
}
<div class="window">
<div class="b"&
浏览 0提问于2018-04-13得票数 3
回答已采纳
2回答
ie11中的SVG问题
、、、
我有一个div，它的高度设置为320像素，然后它的子空间被设置为100%的宽度。它的子文件是一个SVG文件，我将其宽度设置为容器的200%。在运行良好的chrome和firefox中，我得到了这样一个很好的图像：
HTML如下所示：
<div class="kit-template ng-isolate-scope front">
<div class="svg-document ng-scope">
<svg version="1.1" xmlns="http://www.
浏览 4提问于2015-10-12得票数 18
回答已采纳
1回答
我遇到了一个奇怪的问题。
我用div标签制作了这些按钮，它们的边缘是圆角的，边框的颜色是在CSS中定义的。为了让它们指向我用<a>标签包围它们的地方。问题是，当链接指向以前访问过的内容时，div边框会变成白色。通常，我只会检查Chrome中的元素，看看是哪个CSS规则做到了这一点，但只要我导航到该元素，边框就会自动调整为它应该是的颜色。
这在Chrome中发生，但在IE或Firefox中不会发生。
此外，我正在使用Joomla 1.5和Artisteer来制作模板(尽管我确实对其进行了大量修改)。
作为一个临时的解决方案，我使用了onclick JavaScript链接来使按钮工作
浏览 0提问于2012-08-21得票数 2
回答已采纳
我使用以下html语句：
<select ...>
<option value=""></option>
<option data-ng-repeat="type in xy" value="{{type.name}}" ng-style="{'border-left': '4px solid '+ type.color, 'color': type.color}" style="margin-bottom: 2px;&#
浏览 1提问于2016-01-18得票数 0
1回答
在可滚动HTML框架上设置边框
、、、、
我有一个框架，它将承载导航树。我想在框的右边有一个蓝色的边框。这个边框应该从上到下填充整个框架区域，并且框架也应该是可滚动的。
框架没有固定的大小，它将填充整个浏览器窗口的左侧，并在用户调整浏览器窗口大小时更改大小。
树框架(和最小上下文)被定义为：
<html>
<head><title></title></head>
<frameset cols="250,*" frameborder="0" framespacing="0" >
<frame src=
浏览 2提问于2011-11-15得票数 2
回答已采纳
2回答
我在一些图像上有滤镜，使它们变灰，只有在它们上悬停才会使它们变色：
.bxslider2 img {
display: inline;
float: left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.333
浏览 3提问于2014-02-17得票数 5
2回答
我在一个div中有一个SVG，我试图使用绝对定位将它居中。不过，在IE11上，SVG不在中心位置。当我去掉绝对定位时，IE11和Chrome上SVG的起始点似乎是不同的。在IE11上，SVG的位置比Chrome低几个像素。
我尝试使用Flexbox解决方案而不是绝对定位，但同样的问题仍然存在。即使使用align-items: center和justify-content: center，IE11版本也比Chrome版本低几个像素。
这让我相信这真的不是定位的问题，而是SVG显示和IE11上的定位有一些根本的区别。我正在使用VM在IE11上进行调试，但是在它上进行开发是非常滞后和费力的。
SVG
浏览 2提问于2017-04-24得票数 0
1回答
我有一张地图，每当我放大地图时，地图会变得更大(缩放工作正常)，但地图超出了SVG的边缘，因此覆盖了我网页的其他功能。这只会在IE9中发生。在chrome中，每当我放大地图时，地图总是停留在SVG中。还有没有其他人有这个问题，并提出了解决它的方法？我想将地图保存在SVG中。
谢谢
浏览 1提问于2013-03-05得票数 2
回答已采纳
我使用的是JW Player v8.10.3，我想在Chrome，Firefox，IE11，Microsoft Edge和Safari中禁用快进。下面的代码可以在Chrome和Firefox中运行。
要重现此问题，请在Microsoft Edge/IE11/Safari上单击未来时间至少几次。然后点击一个更远的未来的时间。视频将跳转到被点击几次的时间。
有没有人遇到过这个问题，或者对如何解决这个问题有什么想法？
var seeking = false;
var maxPlayPosition = 0;
jwplayer().on('time', function (event
浏览 0提问于2019-09-12得票数 0
我支持一些旧的SVG图形，我们在我们的应用程序中。我在绘制矩形的填充颜色动画时遇到了一些问题，我想知道是否有人看到过同样的问题。
我们在rec上设置了一个动画元素，结果如下所示：
<svg id="svgEle" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rect"
width="100" height="100"
style="fill:#008000; stroke:#000000;
浏览 1提问于2012-06-22得票数 2
2回答
在我的Wordpress 上
我在我的小部件区域中为帖子设置了一个边框图像，其中包含以下CSS：
#secondary .widget_siteorigin-panels-postloop .post {
border: 30px solid transparent;
-webkit-border-image:url("border-thick.png") 30 stretch;
-moz-border-image:url("border-thick.png") 30 stretch;
-o-b
浏览 5提问于2015-05-03得票数 0
我想有一个文本区，它是500px，这是我对文本区使用的CSS：
width: 498px;
padding: 0px;
margin: 0px;
我注意到IE和Chrome默认情况下有一个1px边框，而FF有一个2px边框，导致文本区域是502px而不是500px，有什么解决办法吗？
只需注意，我可以显式指定texarea边框宽度，即。边框宽度：1px，但这里的问题是，它不能很好地与IE一起工作(当边框设置为1px时，IE中默认的文本区边框在视觉上看起来不好)，我可以改变边框的颜色，但我不想这样做，我更喜欢保持默认的浏览器样式，我只是想让宽度在所有浏览器中都是相同的，而不改变默认样式或设置边框
浏览 1提问于2008-12-27得票数 6
我目前有一个使用D3的网站，我希望用户可以选择将SVG保存为SVG文件。我用crowbar.js来做这个，但是它只在铬上工作。safari没有发生任何变化，IE拒绝了crowbar.js中用于下载文件的crowbar.js方法的访问。
var e = document.createElement('script');
if (window.location.protocol === 'https:') {
e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-cr
浏览 6提问于2014-04-22得票数 95
回答已采纳
这些命令中哪一个是正确的？
第一(特征选择)第二(孤立点检测)
或
第一(孤立点检测)第二(特征选择)
浏览 0提问于2018-10-16得票数 1
如何在Firefox、Safri和Chrome下的单选按钮周围设置边框和背景色？
我知道它只适用于IE。
下面是带有红色边框+红色背景的IE的捕获。
下面是带有红色边框+红色背景的Chrome的捕获。
如您所见，没有显示边框+背景。
这是我的css：
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
谢谢。
浏览 3提问于2012-03-07得票数 4
好的，我有父表<table class="{style.removeBorderTable}" >，子表<table class="{style.flexTable}">
.flexTable {
border-spacing: 7px;
}
.removeBorderTable {
border-collapse:collapse
}
在IE中，它没有边框空间，如下所示：
在Chrome中，它有boprder空间，如下所示
那么，如何修复呢？真正的代码是非常复杂的，但是当我删除.removeBorderTabl
浏览 2提问于2014-10-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
