如何计算svg feGaussianBlur的大小
计算 svg feGaussianBlur 的大小需要考虑以下几个方面：
- SVG（可缩放矢量图形）：SVG 是一种基于 XML 的矢量图形标准，用于在 Web 上显示图形。它支持图形的放大缩小而不失真，并且可以通过代码来定义图形的属性和样式。
- feGaussianBlur：feGaussianBlur 是 SVG 中的一个滤镜效果，用于实现高斯模糊。它通过对图像的像素进行模糊处理，使图像看起来更柔和。
计算 feGaussianBlur 的大小可以考虑以下几个因素：
a. 标准差（stdDeviation）：标准差控制着模糊的程度，标准差越大，模糊效果越明显。通常情况下，标准差的值为正数，表示模糊的半径大小。一般来说，标准差的值在 0 到 10 之间。
b. 输入图像的大小：feGaussianBlur 会对输入图像的像素进行模糊处理，因此输入图像的大小会影响最终效果的大小。
c. 渲染引擎：不同的 SVG 渲染引擎可能对 feGaussianBlur 的实现方式有所差异，可能会影响最终模糊效果的大小。
需要注意的是，feGaussianBlur 的大小计算通常由渲染引擎自动处理，开发者无需手动计算。可以通过调整标准差的值来控制模糊的程度，而不需要直接计算大小。
腾讯云相关产品和产品介绍链接地址： 腾讯云图像处理（Image Processing）：https://cloud.tencent.com/product/imgpro
相关·内容
我正在试用vue.js来使用表单输入来更改svg-元素，例如，一些rect的位置和一些筛选值。
下面是使用两个范围输入的示例的一部分。请参见，位置没有出现任何问题:在更改输入滑块后，rect示例的y坐标(ypos)被正确更新。
然而，模糊过滤器没有响应。虽然数字从输入范围得到更新到dom-元素，但标记似乎被转换为小写(std偏差)，之后我的浏览器(chrome)似乎忽略了它。
我怎么才能解决这个问题？谢谢!
<div id='app'>
<input type='range' v-model='stdev'>
浏览 5提问于2016-02-05得票数 1
回答已采纳
1回答
我使用一些SVG作为伪内容的背景图像，如下所示：
a:after {
content: url('../images/icon_candidate_grey.png');
content: url('../images/svg/person.svg');
width: 100px;
left: 50%;
margin-left: -50px;
background: transparent;
}
我想在那些将识别它的浏览器中向SVG应用一个下拉阴影过滤器。到目前为止我还在这么做：
a:hover:after {
浏览 3提问于2014-03-17得票数 2
回答已采纳
2回答
我想在div中显示一个svg元素，但是我放置在div中的svg根本看不见。
如何使svg在div中可见？
<div style="height:100px;background:yellow;">
<div style="float:left;background:orange;">
<svg viewBox="0 0 100 100">
<title>svg arrow with dropshadow</title>
<desc>An svg exa
浏览 1提问于2013-07-30得票数 1
回答已采纳
2回答
下面的代码适用于主页上的"page URL“== "base URL”
但在任何其他页面上都会失败
<svg>
<filter id="blur">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
<image id="svg-image" xmlns:href="http://x.com/image.jpg"
filter
浏览 1提问于2015-09-26得票数 0
1回答
我正在对图像使用svg模糊滤镜，如下所示
<svg id="blurjs-10">
<filter id="blur10px">
<feGaussianBlur stdDeviation="10" in="SourceGraphic">
</filter>
</svg>
但是firefox的这种模糊的视觉输出真的很糟糕。
有什么解决方案吗伙计们？
浏览 1提问于2013-06-17得票数 2
1回答
我试图弄清楚如何通过SVG文件中的id访问特定的元素。我使用lxml的python库来解析文件，但始终是空的。下面是我用来访问元素的python脚本：
#!/usr/bin/env python
from lxml import etree
XHTML_NAMESPACE = "http://www.w3.org/2000/svg"
XHTML = "{%s}" % XHTML_NAMESPACE
NSMAP = {None : XHTML_NAMESPACE}
root = etree.parse("temp.svg")
textid =
浏览 4提问于2015-05-21得票数 1
回答已采纳
1回答
我用如下的结构定义了我的自定义svg元素：
<svg>
<defs>
<filter id="myFilter"> ... </filter>
<pattern id="myPattern"> ... </pattern>
</defs>
<rect width="100" height="100" class="myRect"></rect>
</svg>
.myR
浏览 6提问于2015-12-09得票数 0
回答已采纳
我正在尝试将高斯模糊应用于Firefox中的png图像。对于WebKit浏览器，我使用CSS3过滤器属性。在CSS中，我使用了2px的模糊效果，但是如何在SVG中用"stdDeviation“创建同样的效果呢？谢谢!
浏览 0提问于2012-11-03得票数 1
2回答
使用svg瓜西模糊滤波器进行跨浏览器图像模糊处理。总的来说，它的工作非常好，除了Safari的情况。
在桌面Safari中，图像是模糊的，但它也是亮的。这在任何其他浏览器中都不会发生(在火狐浏览器、Chrome浏览器、IE9-11浏览器和iOS 7中的移动Safari浏览器中进行了真正的测试)。
下面是一个演示svg实时过滤器和Safari正在看到的链接屏幕截图，
这里还有正在使用的svg代码：
<svg class="sg-blur-2">
<defs>
<filter id="sg-blur-2">
浏览 14提问于2014-06-18得票数 4
回答已采纳
1回答
基于此：https://dev.to/gavinsykes/appending-a-child-to-an-svg-using-pure-javascript-1h9g 我试图在SVG的defs部分中附加一个过滤器...但它并没有起作用。当我尝试时，它给了我一个错误: SVG的id是Oo_banner.defs.appendChild(filter) Oo_banner。 所以我继续思考，我可以在SVG的末尾定义我的模糊滤镜，但即使这样也行不通，因为它把feGaussianBlur放在滤镜标签后面。不管怎样，下面是我的代码： <svg id="Oo_banner"
浏览 28提问于2021-06-26得票数 0
回答已采纳
1回答
我正在通过滑块输入控件更新SVG过滤器属性，但它不会持续更新呈现的过滤器。
下面是工作代码：
如果我使用dangerouslySetInnerHTML设置过滤器，那么它可以工作，但是这个技巧不足以在生产代码中使用吗？
class App extends React.Component {
constructor(props) {
super(props);
this.state = { blur: 2 };
this.blurChange = this.blurChange.bind(this);
}
blurChange(event) {
thi
浏览 17提问于2019-03-29得票数 5
回答已采纳
1回答
这是CSS模糊滤镜的工作代码：
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url('images/blur.svg#blur');
其中，blur.sv是：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
&
浏览 0提问于2012-12-18得票数 0
回答已采纳
1回答
Svg不缩放
、、
我有一个svg文件并在我的HTML代码中使用它。出于某种原因，它不会扩大规模。我的意思是，我只能改变图像的宽度和高度(这样它就变成了一个更大的盒子，占用了更多的空间，但是那个盒子里面的矢量图像不会缩放)。在svg文件中，我有viewbox属性，但是当我更改它的值时，它仍然不缩放(实际上它什么也不做)。有什么想法吗？
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
w
浏览 2提问于2019-10-26得票数 3
回答已采纳
2回答
我尝试使用模糊svg滤镜作为外部文件，并通过CSS属性链接它。
我可以用colorMatrix滤镜成功地做到这一点，但是当我把它改为GaussianBlur时，图像就消失了。
HTML和CSS非常简单
<div class="demo">
<img src="./frost_files/demo.jpg"></img>
</div>
.demo {
filter: url(blur.svg#blur);
}
文件blur.svg包含：
<svg version="1.1
浏览 0提问于2013-06-19得票数 1
回答已采纳
1回答
我在svg中使用了一个非常简单的高斯模糊： <filter id="filter2" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
</filter> 这个效果基本上是每边15px宽(之后模糊太弱了)。如何在过滤器大小(x，y，width，height)中正确编码，以便对任意元素重用过滤器？
浏览 16提问于2019-01-10得票数 0
1回答
我试图在我的svg中添加一些嵌入的阴影，使它看起来更像这样
而不是像这样
我尝试在每个路径(filter="url(#inset-shadow)")中添加一个嵌入阴影，使用从获得的过滤器模式，并列出了下面的内容，但它最后所做的只是给每个路径一个大纲。您可以在查看代码，看看我在说什么。
<filter id="inset-shadow">
<feComponentTransfer in="SourceAlpha" result="inset-selection">
浏览 0提问于2021-06-16得票数 0
回答已采纳
我在学习SVG。我无法理解过滤器属性。为什么在这个示例代码中x和y的值是负值。为什么当我指定正值时，我的内容就消失了？
<defs>
<filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</defs>
<rect x="
浏览 2提问于2018-01-30得票数 2
回答已采纳
3回答
我一直在网站上玩SVG，我一直在努力让filter工作，但我似乎搞错了。
问题是，一旦我应用了定义的svg，filter就完全消失了。我尝试将filter内联应用，只是想看看它是否有效，如下所示：
<symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')">
...
</symbol>
但没有成功。
最终，我的目标是能够通过CSS应用filter，但我似乎无法让它起作用，这是我第一次真正地使用SVG，所以我不知道我是否
浏览 5提问于2016-02-16得票数 11
回答已采纳
1回答
你好，我试图应用这个svg嵌入阴影过滤器到我的div。Chrome运行良好，而Safari则不行。
这里是svg过滤器：
<filter id="inset" primitiveUnits="objectBoundingBox" x="0%" y="0%">
<feOffset dx="0.00" dy="0.00"></feOffset>
<feGaussianBlur stdDeviation="0.1" result="
浏览 0提问于2018-03-06得票数 1
1回答
我已经使用Figma来创建一些动画文本，右击-> copy as SVG并插入到一个html文件中，但是当我刷新网页时，文本并没有显示出来，只是在html文件中的图像下出现了一个白色条纹。你能帮帮我吗？这太令人沮丧了。
现在，SVG动画的代码非常长，充满了数字，所以我将为您简单地介绍它
@import './birds-animation';
body {
position: relative;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
<!DOCTYPE
浏览 2提问于2020-03-14得票数 0
1回答
无法在IE11中应用拖放阴影
、、、、
如何在11中显示与使用此规则在chrome中应用相同的阴影？
filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
这是我的工作铬标记HTML
<div class="cta-image-container">
<div>
<svg class="svg-cta-image">
<image filter="url(#dropshadow)" width="640" height="580" cl
浏览 4提问于2020-03-06得票数 1
回答已采纳
我有一些类似以下的东西：
<svg id="svgLogo1" style="left:0; top:0; position:absolute"
width="980" height="80" viewBox="0 0 980 80"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="5" width="980" height="54
浏览 1提问于2012-03-09得票数 29
假设我在SVG中有一个带有半透明黑色填充(或任何半透明颜色)的圆形(或任何形状)： <circle r="50" fill="rgba(0, 0, 0, 0.2)" /> 如何删除透明度独立于形状填充的可配置(颜色、模糊、位置)嵌入阴影？ 注意:我事先不知道任何关于背景的东西，SVG必须是真正透明的，而不是伪造的。 ?
浏览 21提问于2020-06-24得票数 0
回答已采纳
我从svg文件中得到了下面的svg过滤器： <defs>
<filter height="300%" id="blurfilter" width="300%" x="-1" y="-1">
<feGaussianBlur result="blurOut" stdDeviation="2.0" />
<feColorMatrix in="blurOut" result=&#
浏览 24提问于2021-07-05得票数 3
回答已采纳
3回答
背景：
目标:创建一个可以通过CSS应用的三角形阴影(即矢量，而不是光栅图像)。
经过大量的研究(当然，我对替代方案持开放态度)，我选择使用SVG背景图像作为数据uri (以避免额外的HTTP请求)。
我知道这是可行的：
我困在哪里：：
我创建了一个简单的svg三角形，具有高斯模糊效果，如果它是直接用HTML编写的(相对于CSS)，svg完美地工作：
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1">
<d
浏览 7提问于2012-12-06得票数 13
回答已采纳
我正在尝试使用fabricjs将SVG图像转换为canvas (之后再转换为PNG)。它起作用了，但看起来我错过了一些重要的参数
你可以在这里看到转换的结果和原始的svg
我用来进行转换的代码：
<script src="https://staging.chiplab.com/test/fabric.js" data-cover></script>
<canvas id="canvas" width="600" height="600"></canvas>
<script&
浏览 26提问于2017-07-11得票数 0
我使用SVG过滤器
feGaussianBlur
在我的申请中。通过测试几种配置，如果我添加相同的SVG形状并将过滤器应用到它，我最喜欢这种效果。
是否有一种简单的方法可以通过将过滤器(带有特定参数)应用于目标SVG形状(以避免创建冗余和SVG元素)来实现相同的结果？
见下面的例子。我最喜欢第三圈。但是，它是通过在彼此之上添加多个圆圈来创建的。
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->
&l
浏览 1提问于2019-08-18得票数 0
回答已采纳
1回答
我想在svg剪辑路径上应用一个过滤器。
这是我的密码
<svg>
<filter id="filter">
<feGaussianBlur stdDeviation="10"></feGaussianBlur>
</filter>
<clipPath id="clip-path">
<rect width="200" height="100" x="0" y="
浏览 2提问于2016-06-03得票数 1
回答已采纳
此Codepen显示了一个发光的红色SVG路径。 https://codepen.io/OpherV/pen/dRoQdN <svg height="300" width="824">
<g class="svgWrapper" transform="translate(412,150)">
<defs>
<filter id="glow">
<fegaussianblur c
浏览 11提问于2021-04-18得票数 2
回答已采纳
通过在Inkscape v0.91中应用过滤器，我创建了一个很好的svg框架。我也想把它应用到HTML元素中。但是我做不到。我原以为div元素会像svg的rect元素一样变成一个框架。你能解释一下为什么svg过滤器不适用于div元素吗？许多人似乎能够将svg过滤器应用于html元素。
<html>
<head>
</head>
<body>
<div style="
background-color: aliceblue;
width: 300px;
height: 300px;
filter: ur
浏览 2提问于2016-05-30得票数 2
回答已采纳
2回答
不渲染滤波器的角SVG
、、、
我试图在一个有角度6的应用程序中呈现一个带有过滤器的SVG，但是我无法得到要应用的过滤器。即使在尝试了几个已经给出的类似问题的解决方案之后，比如删除<base href="/">或者为过滤器样式提供完整的URL。
<svg height="200" width="200">
<defs>
<filter id="glow">
<fegaussianblur result="coloredBlur" stddevia
浏览 2提问于2019-12-13得票数 0
回答已采纳
1回答
我开始玩svg效果和动画，我发现了一个很好的例子，如何将模糊效果应用于svg路径，但我不知道如何设置所需的颜色，而不是默认的黑色。
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feMerge>
&l
浏览 1提问于2018-09-27得票数 1
回答已采纳
2回答
SVG滤镜:边界框
、、、
所以我遇到了以下问题：
首先，这里有一段代码片段
body{
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
overflow:hidden;
}
.box{
width:100px;
height:100px;
background:#545454;
overflow:visible;
filter:url("#distort");
}
svg{
display:none;
}
<div class
浏览 0提问于2018-07-23得票数 1
1回答
CSS字体上的圆角边
、、、、
是否可以将带有CSS的字体转换为具有圆角的边？
我说的是一个类似于的效果
到目前为止，我尝试使用SVG过滤器，但似乎有点复杂。
有更好的方法吗？
SVG过滤器使用的代码如下：
<svg viewbox="0 0 100% 100%">
<defs>
<filter id="smooth">
<feMorphology operator="dilate" radius="0" />
<feGaussianBlur stdDeviati
浏览 1提问于2020-05-10得票数 3
回答已采纳
1回答
您好，我在Angular中使用SVG绘制了一条线，并使用了一些用于发光效果的滤镜，但滤镜url在浏览器中不起作用，当我执行"ng serve“时，它不会显示任何内容。但是相同的svg在独立的svg文件中工作得很好。
<svg height="300" width="824">
<g class="svgWrapper" transform="translate(412,150)">
<defs>
<filter id="glo
浏览 5提问于2018-02-13得票数 0
2回答
SVG:阴影的颜色
、、、
我想在SVG中写一个带有红色阴影的简单矩形。我有一个简单的过滤器：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
<title>svg arrow with dropshadow</title>
<desc>An svg example of an arrow shape with a dropshadow filter applied. The dropsha
浏览 1提问于2011-11-01得票数 8
回答已采纳
1回答
我有一个带有下降阴影的svg加载程序，但是由于某种原因，阴影出现在图像的顶部，有效地隐藏了它。有人能指出我哪里出了问题吗？
<div class="loader">
<div class="svg-favicon">
<svg version="1.1" id="full_x5F_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x=
浏览 0提问于2017-05-24得票数 0
回答已采纳
1回答
动态替换SVG中的图像元素
、、、、
我想替换一个SVG标签的图像元素。我希望每次调用controller.js中包含图像的对象时，都会获取此图像，并将此图像表示为SVG在不同文件中的模糊背景图像，该文件名为default.js。
我怎么发动汽车呢？
default.html：
<div id="backgroundImage">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
浏览 2提问于2012-10-07得票数 1
回答已采纳
2回答
我有一个SVG勾号图标，上面有一个正在被裁剪的下拉阴影。我在这里看到的常见的滤镜偏移量方法并没有帮助。有什么建议吗？
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="73.516px" height=
浏览 0提问于2013-07-14得票数 3
回答已采纳
1回答
我试图在SVG上的剪贴画中添加一个阴影，如何在React本机中实现？如果我原来的SVG是阴影，那么图像覆盖它。我现在的代码是：
<svg>
<Defs>
<ClipPath id='clip'>
<Path
d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,
浏览 1提问于2020-06-03得票数 0
3回答
我正在尝试用多边形svg形状模糊背景。下面是svg。这是
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpa
浏览 0提问于2016-10-28得票数 0
1回答
我有一个具有背景图像的元素集合，在它们上有一个SVG过滤器，使背景图像变成灰色。我需要它，这样当你悬停在那个元素上时，SVG过滤器就会变得透明，这样原来的彩色图像就会显示出来。不幸的是，我似乎无法做到这一点。下面是CSS：
.badge__image {
background-position: center;
filter: url(/dist/filter.svg#duotone_bluetan);
}
.badge__image:hover {
-webkit-transition : -webkit-filter 1000ms ease;
transit
浏览 2提问于2019-03-06得票数 0
回答已采纳
2回答
可以转换吗？
到svg格式？我试过在线转换器，但它们没有用。
我已经设法创建阴影与svg图标插件的传单，但当我导入svg在图形，它不保持它的形状。
这是svg：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon-svg" style="width:40px; height:72">
<fil
浏览 0提问于2021-10-03得票数 0
回答已采纳
1回答
我有一个带有交互式SVG的页面，它在所有浏览器(Firefox，Chrome，甚至IE/Edge)上看起来都很好，除了Safari，在Safari中，所有受SVG过滤器影响的东西都变成了模糊的混合体(看起来像是在一个低分辨率的画布上呈现的东西，使用双线性插值进行缩放)。
下面是一个小测试案例，其中也出现了问题：
<svg>
<defs>
<filter id="filter" y="-100" x="-100" height="300" width="300">
浏览 9提问于2017-12-22得票数 3
回答已采纳
2回答
我有以下SVG：
<defs>
<filter id="dropshadow">
<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussia
浏览 4提问于2016-10-27得票数 2
回答已采纳
我试图将CSS过滤器模糊应用于某些元素，但不知怎么的，这是行不通的。
下面是一个jsfiddle中的示例：
我已经应用了下面的css，但我的'.blurred‘圆圈一点也不模糊。HTML：
<svg width="500px" height="500px">
<circle class="blurred" cx="100" cy="100" r="50" fill="red"></circle>
<circle
浏览 6提问于2014-08-25得票数 4
回答已采纳
1回答
我目前正在尝试实现一个API，该API使用SVG生成径向进度。
下面是一个示例，说明当我将父div调整为更小的值时会发生什么。
有人能提出解决方案，使SVG相对于父容器调整大小吗？
我尝试在SVG元素上使用viewbox属性，结果并不理想。
下面是我的标记的一个示例：
text {
text-anchor: middle;
font-weight: bolder;
font-family: 'Nunito', sans-serif;
}
.shadow {
-webkit-filter: drop-sha
浏览 5提问于2021-04-03得票数 1
回答已采纳
1回答
当我将模糊过滤器应用于svg图像时，它会模糊边缘，因此它们变得不透明(见左示例)。我想要的是模糊它没有这样的人造物(见正确的样本)。我通过黑客解决了这个问题:复制相同的翻转图像，并将它们放置在4面。
还有更好的办法吗？
请注意，我不能只是使图像大的5-10%，大小应该是相同的原始图像。
这是我的svg：
...
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter
浏览 0提问于2014-06-25得票数 5
回答已采纳
注意:这不是像这样的问题的重复。我看到了这些，并将我的viewbox属性修正为viewBox。这就引出了我在这里的问题。
我正在尝试建立一个 (智能游戏格式)编辑器使用角4来实践这项技术。我希望应用程序能够响应，这样我就可以像在桌面上一样在智能手机上很好地使用它，所以我同样希望图形能够响应。SVG似乎是一个很好的选择(以“可伸缩”的名字表示)，所以我进行了实验，直到得到了我喜欢的效果：
在将它复制到我的角度应用程序之前，我做了一些研究，以确定是否需要做任何其他事情来使我的SVG响应。说我需要用一个viewBox属性替换width和height属性，所以我这样做了。我还注意到以下段落
浏览 3提问于2017-10-01得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
