Safari的<SVG>过滤器问题
是指在Safari浏览器中使用<SVG>（可缩放矢量图形）元素时，可能会遇到一些过滤器相关的问题。
<SVG>过滤器是一种用于对图形进行处理和增强的技术。它可以通过应用各种滤镜效果，如模糊、颜色调整、阴影等，来改变图形的外观和表现形式。然而，在Safari浏览器中，对于一些复杂的<SVG>过滤器，可能会出现以下问题：
- 兼容性问题：Safari浏览器对于某些<SVG>过滤器的支持不完善，可能无法正确显示或应用过滤器效果。这可能导致图形显示不正常或无法达到预期的效果。
- 性能问题：一些复杂的<SVG>过滤器可能会对性能产生负面影响，特别是在移动设备上。由于Safari浏览器在处理<SVG>过滤器时的性能优化不足，可能导致页面加载缓慢或动画卡顿。
针对这些问题，可以考虑以下解决方案：
- 简化过滤器效果：尽量避免使用过于复杂的<SVG>过滤器效果，特别是在需要在Safari浏览器中展示的情况下。可以选择简化过滤器效果，或者使用其他方式实现相似的效果。
- 浏览器检测和兼容性处理：可以通过检测用户所使用的浏览器类型和版本，针对Safari浏览器做特殊处理。可以使用JavaScript库或框架来实现浏览器检测，并根据检测结果选择性地应用或替代<SVG>过滤器。
- 使用替代方案：如果<SVG>过滤器在Safari浏览器中无法满足需求，可以考虑使用其他技术或工具来实现类似的效果。例如，可以使用CSS滤镜效果、Canvas绘图、JavaScript图形库等来替代<SVG>过滤器。
需要注意的是，以上解决方案仅针对Safari浏览器中的<SVG>过滤器问题。对于其他浏览器或平台，可能存在不同的兼容性和性能考虑。因此，在实际开发中，需要综合考虑不同浏览器和平台的特性，并选择合适的技术和工具来实现所需的效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云SVG图像处理：https://cloud.tencent.com/product/tci
- 腾讯云Web应用防火墙（WAF）：https://cloud.tencent.com/product/waf
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
相关·内容
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
回答已采纳
如何使图像变成黑色/白色，然后在Safari和所有浏览器中进行悬停着色？
img.grayscale {
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.3333 0 0 0.3333 0.3333 0.3333 0 0 0.
浏览 1提问于2013-05-02得票数 3
1回答
我知道这个问题已经被问过了，但我找不到直接的答案。
我正在尝试在页面上显示一些图像，它们应该以灰度显示，除非鼠标悬停，当它们平滑地转换为彩色时除外。我已经让它在IE、Chrome和Firefox上运行得很好，但在Safari5.x上就不行了。问题出在Mac版Safari 5和Windows版Safari上。
我使用了以下代码
img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\
浏览 0提问于2013-07-22得票数 0
我测试了一些feDisplacementMap svg过滤器。它们在macbook上的Safari上显示得很好。但是我的iphone手机上的safari没有显示它们。 这是一个例子。 <svg id="svgeffects">
<defs>
<filter class="safari_only" id="liquify">
<feTurbulence baseFrequency="0.015" numOctaves="3" result=
浏览 39提问于2019-01-15得票数 0
我正在使用一个蒙版从我的SVG形状中切出一个圆圈。我想要一个带有羽毛边缘的聚光灯效果，所以我在Firefox和Chrome中使用高斯模糊滤镜来实现这一点，但由于某些原因，我无法让Safari渲染滤镜。这可能与它是遮罩定义中的形状有关吗？我读到过Webkit通常需要设置一个标志来启用SVG过滤器。会是这样吗？
下面是过滤器的定义：
<defs>
<filter id="blur_alpha" x="-1" y="-1" width="100" height="100" filterUnits
浏览 0提问于2011-08-30得票数 1
回答已采纳
2回答
最新Safari中的SVG过滤器
、、、、
因此，我有一个很好的svg过滤器，我可以应用到dom元素中，并创建一个“粘贴”效果。在Chrome中工作很好，在Safari中没有骰子。以前有同样问题的问题可以追溯到2010年，似乎已经在safari 6中得到了修正。不幸的是，我找不到关于这个话题的任何资源，甚至很难确定问题可能从哪里开始。
我在这个inChrome中附加了工作代码( JSfiddle )
<svg height="200px" width="300px" viewbox="0 0 300 200">
<defs>
<filter
浏览 6提问于2016-09-28得票数 3
回答已采纳
4回答
我在一个使用img标签嵌入的SVG文件中使用了投影滤镜。在我的MacBook上，它在Safari中看起来很好。然而，在移动Safari中，图形变得非常像素化，失去了所有的锐度。如果未应用滤镜，则SVG渲染效果良好。除了传递过滤器之外，还有什么方法可以解决这个问题吗？
浏览 1提问于2013-02-03得票数 4
回答已采纳
1回答
使用CSS3灰度滤波器处理组合图像。在Chrome，Firefox，Safari 7和iOS上看上去都很棒。
图像-Chrome 30:
图片-火狐24:
对比过载在Safari 6。灰被完全吹灭，黑色是过饱和。
图片-Safari 6:
代码：
img.grayscale {
/* Firefox 10+ */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'
浏览 3提问于2013-10-27得票数 1
问题：
在Safari中，两个滤镜都会显示出来-但都是矩形的全宽/全高，所以只有最上面的一个是可见的。
我如何让它在不同的浏览器上一致地工作？
bug的演示：。在Chrome或Firefox中打开以查看其外观。谢谢!
html：
<svg class='a'>
<defs>
<filter id='hey'>
<feColorMatrix
type='matrix'
result='darken'
values=
浏览 23提问于2018-06-07得票数 0
回答已采纳
我试图在文本上使用SVG过滤器(的示例)来模拟某种“水效应”。结果在Chrome和Firefox中是可以接受的，但是Safari的行为很奇怪。
我试着分解代码，找出代码的哪一部分是错误的，但没有成功。Safari 12+正确支持SVG-过滤器：
* {
margin: 0;
padding: 0;
}
.main {
font-family: sans-serif;
font-weight: 600;
align-items: center;
justify-content: center;
display: flex;
filter: blur(2px
浏览 0提问于2019-02-08得票数 1
回答已采纳
1回答
在我的web应用程序中，我需要对一些图片进行去饱和/灰度缩放。我正在使用以下CSS来实现这个目标：
.grayscale {
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera
浏览 1提问于2013-08-05得票数 3
回答已采纳
1回答
我试图将模糊过滤器应用到svg中，但是Safari似乎不能正确地呈现颜色。下面是我的问题的一个例子：
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur stdDeviation="15" />
</filter>
</defs>
浏览 4提问于2014-03-24得票数 5
回答已采纳
2回答
对某人来说是个有趣的问题。我试图使用以下标记将SVG筛选器应用于加载在页面中的图像：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#exampleImage {
filter: url("#grayscale");
}
</style>
</head>
<body>
<img id="exampleI
浏览 3提问于2012-12-04得票数 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
回答已采纳
1回答
我有一个网站，它有一个跟随光标移动的svg。
它在Chrome和Safari中运行良好，但在Safari (ios和桌面)中却出现了问题。有一些奇怪的方块出现在对象的边缘。我不确定这是假名还是怎么的。也许是优化错误或者别的什么？
如果有人知道如何解决这个问题，我将不胜感激。
非常感谢
浏览 0提问于2020-11-14得票数 0
编辑我已经审查了我的整个帖子，以增加关于这个问题的精确性，并获得更多的资源。..。
我刚开始使用SVG进行网页设计，但我打算为主题实现一个很酷的CSS功能。关于信息，我使用SASS编译我的样式。
我想要实现的是获得一个可配置的主题，它可以简单地通过改变SASS文件中的一些vars来改变颜色。
为此：
我使用“未着色”SVG作为我网站的一些元素的背景。然后为这些元素应用SVG过滤器来“着色”它们。
在这一点上，我很高兴，因为它正在起作用.几乎所有浏览器:勇敢，Chrome，火狐，歌剧，边缘
，但是它在Safari上不起作用，我不知道为什么：
看来，我不能使用带值url('data:ima
浏览 11提问于2021-05-21得票数 1
我正在使用下面的CSS来获得悬停的灰度效果。Firefox的问题是，它会稍微模糊图像，并将图像向右移动1-2个像素。我不确定为什么会发生这种情况。
这是一个固有的问题吗？我该怎么解决它呢？
.zd-stack img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' v
浏览 0提问于2013-05-07得票数 9
我正在用D3.js开发一个应用程序。我被转移了一段时间，最近又回来了。今天我发现，尽管它过去运行良好，但应用程序中的SVG地图不再显示在移动Safari (iOS 9.3.1)或桌面Safari (v9.1 (11601.5.17.1) )上。
我提取了SVG和一个单一的样式规则，并将它们放在CodePen上来说明发生了什么。在Chrome里，这支笔看起来会很好。在Safari，它将是完全空白的。
如果您检查Safari中的DOM，您会发现路径在那里，并且它们是正确的形状。他们只是看不见而已。取消选中检查器中的样式规则将导致整个地图神奇地出现(显然，没有下拉阴影)。
样式规则非常简单：
sv
浏览 0提问于2016-04-18得票数 16
回答已采纳
我用这些滤镜来降低图像的饱和度：
img {
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.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1
浏览 0提问于2012-12-14得票数 9
回答已采纳
我有一个非常基本的SVG剪辑路径：
<svg width="0" height="0">
<defs>
<clipPath id="line">
<path d="..." />
</clipPath>
</defs>
</svg>
我想使用w/ CSS：
div {
clip-path: url(#line);
&:before {
...
}
}
它在Google上运行得很好，但
浏览 1提问于2022-03-25得票数 2
1回答
我正在尝试将图像从50%的灰度滤镜转换为悬停时的无滤镜状态。
然而，这种转换在firefox中不起作用。是否可以仅使用css在firefox中运行转换？
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></f
浏览 0提问于2012-12-07得票数 5
回答已采纳
3回答
有没有办法在没有JavaScript或SVG的情况下让灰度图像过滤器在IE10上工作？
我已经在除IE10之外的所有浏览器中成功地使用了以下代码。
img{
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.3333 0 0 0.
浏览 0提问于2013-05-07得票数 24
回答已采纳
2回答
我似乎找不到iOS中支持的SVG特性的一个很好的列表，我得到的最好的是：
我正在研究开发一个使用很多视觉元素的网页的可行性，我们想使用SVG，我对SVG了解不深，所以我想知道iOS Safari的主要兼容性、性能和缺乏功能的问题是什么。
从上面的链接，我似乎不能使用: SMIL动画。动画作为SVG标签，对吗？该链接显示：“Safari中的部分支持指的是不能在HTML文件中工作。”那么，只要SVG不在HTML文件中，它就可以工作吗？所以这意味着我根本不能使用它？我仍然可以使用Javascript (例如jQuery SVG )进行动画吗？
SVG过滤器，现在我不太清楚它涵盖了什么。在iOS上的
浏览 1提问于2012-07-31得票数 4
回答已采纳
我有一个相当简单的设置，希望通过使用svg滤镜来改变svg图像的颜色：
<svg style="height: 0;">
<filter id="hover" color-interpolation-filters="sRGB"
x="0" y="0" height="100%" width="100%">
<feColorMatrix type="matrix"
va
浏览 5提问于2016-09-05得票数 5
回答已采纳
1回答
当小文本被用作剪辑路径时，有谁能建议一种使Chrome不损坏文本的方法呢？
我用的是svg和文本剪辑路径。Windows 7上的Chrome 38 (& 37也是如此)在文本用作剪辑路径时会损坏文本，但只有当文本小于一定大小时才会损坏。以前我可以通过使用svg字体来解决这个问题，但是Chrome 38取消了对svg字体的支持。
甚至像下面这样的简单svg也显示了问题所在：
<div id="container">
<svg id="text_svg" xmlns="http://www.w3.org/2000/svg&#
浏览 4提问于2014-10-22得票数 1
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
情况是我有一个内联SVG，由 Grunticon 并插入到DOM中。它是白色的，背景是灰色的，带有阴影。 我对阴影使用了以下CSS： svg {
-webkit-filter: drop-shadow(1px 1px 0 #141414);
filter: drop-shadow(1px 1px 0 #141414);
} 这在Chrome、Opera、火狐和其他我测试过的浏览器上都运行得很好，除了iOS和桌面上的Safari。CSS过滤器使SVG消失。 这不仅仅是 过滤器也一样，任何过滤器似乎都有这种效果。 Codepen上有一个demo，网址是： http://codepen.i
浏览 56提问于2016-04-04得票数 11
回答已采纳
1回答
我正在尝试用CSS来样式一些Path/SVG元素。特别是，我正试图对他们的边界进行模糊处理。由于元素是从库(leaflet.clustermarkers)创建的，所以我无法控制SVG/Path-元素本身的创建。库提供给元素一个“类”，我可以使用它通过CSS来选择它们。
因此，以下工作：
.poligonArea{
fill:black;
}
但是，以下内容只适用于firefox，但在Chrome和Safari中都不起作用：
.poligonArea{
fill:black;
filter: blur(5px);
-webkit-filter: blur(10px)
浏览 3提问于2017-04-18得票数 1
回答已采纳
2回答
我正在一个网站上工作，并决定给SVGs一个尝试。我的SVG应该在IE、Firefox和Chrome中显示。然而，在Safari，图像是模糊的外观。下面是我正在做的代码：
<object data="section_3.svg" type="image/svg+xml" width="100%" height="722" class="aligncenter" >
<img src="section_3.png" />
<svg version="
浏览 0提问于2014-06-26得票数 4
回答已采纳
1回答
在IE 11中有没有办法让彩色图像变成灰色？在9-10中，它使用svg过滤器工作，但在11中不起作用。
下面是我的代码
img {
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
浏览 1提问于2018-05-29得票数 0
我有一幅有“色调”类的图片：
.hue {
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-filter: hue-rotate(0deg);
filter:hue-rotate(0deg);
}
然后我用jquery改变这个色调：
$('.hue').css({
'-webkit-filter' : 'hue-rotate('+d+'deg)',
浏览 2提问于2014-05-15得票数 0
1回答
我试图应用svg“湍流”过滤器在我的网站上的图像。问题是，它在FireFox和Chrome上看起来不错：
但在野外旅行时看起来很可怕：
似乎Safari在把我的形象“分割”成瓷砖..。你知不知道？
这是我的密码：
<svg>
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence
id="sea-f
浏览 4提问于2022-06-15得票数 2
回答已采纳
我有一个黑白图像，我正在尝试用SVG滤镜重新着色。Safari的颜色看起来比Chrome要暗得多，有没有办法让Safari看起来更像chrome呢？ CSS代码如下所示 .container-teamMembers a.six img {
-webkit-filter: url(#duotone_bright_green);
-moz-filter: url(#duotone_bright_green);
-o-filter: url(#duotone_bright_green);
-ms-filter: url(#duotone_bright_green);
浏览 21提问于2019-05-08得票数 0
我有一个非常简单的SVG过滤器，在Chrome与Safari或Firefox (在Mac上)产生完全不同的结果。问题的核心似乎是在偏置α通道上使用feComposite。这是我的密码：
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
<defs>
<filter id="foo">
<feFlood flood-co
浏览 3提问于2017-04-28得票数 1
回答已采纳
1回答
我一直在遵循这个Q&A来设置我的图像的灰度和透明度，并将它们设置为正常:hover，
它在safari/chrome上工作得很好，但由于某些原因，它不能在火狐上工作。图像是不可见的，但:hover可以正常工作(图像正常显示)
我已经用更新了我的.htaccess，并联系了GoDaddy支持，他们在测试后告诉我.svg MIME类型已在服务器上注册并正常工作。我离线时也有这个问题，所以我猜这是我的.css的.svg出了问题，但我不知道是什么问题，因为我尝试了不同的解决方案，结果是一样的。
我的filter.svg
<?xml version="1.0" encodi
浏览 0提问于2012-07-11得票数 0
回答已采纳
1回答
SVG崩溃Safari
、、、
我在一个项目组合()网站上工作，当我通过所有的web浏览器检查它时，我遇到了一个问题。它在chrome上工作得很好，但是当我用Safari检查它时，浏览器一直在刷新页面，直到它肯定崩溃了。
我使用SVG来渲染parallepipeds，所以我认为问题出在那里……
下面是每个形状框的代码：
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="485" width="
浏览 0提问于2013-01-09得票数 0
我试着用svg得到一个好效果。镀铬的东西很好，但是在Safari & iOS上看起来很奇怪。下面是示例：
它在Chrome上的外观：
它在Safari/iOS上的外观：
问题是，当一个圆太远、太小或丢失时，另一个圆圈就会凸出。所有这些都不是关于铬的问题。
代码：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox=&#
浏览 3提问于2019-09-01得票数 2
回答已采纳
我想知道如何在firefox中应用过滤器属性。到目前为止，我似乎不能匹配我需要的值..
.img-holder>img{
filter: gray; /* IE6-9 */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'900\'/></
浏览 4提问于2014-11-13得票数 0
1回答
我无法在android默认浏览器上对img应用灰度。
这是我的CSS：
#solutions .grayscale {
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.3333 0 0
浏览 3提问于2013-12-13得票数 0
1回答
假设我想使用这个字体：
@font-face {
src: url("https://cdn.glitch.global/f206356a-29f3-4941-a91f-d78ba238df98/Abelone-FREE.otf?v=1650648293770") format("opentype");
font-family: "Abelone";
}
* {
font-family: "Abelone";
font-size: 80px;
}
Hello, world.
是否有办法用CSS或JavaS
浏览 8提问于2022-04-22得票数 1
我正在转换一个网站的主要旗帜从图像到SVG的基础上。代码基本上是这样的：
<svg fill="url(#gradient-5)" width="100%" height="100%" style="transform: scale(1);">
<defs>
<linearGradient id="gradient-5" x2="0%" y2="100%" gradientUnits="userSpaceOnUse"
浏览 1提问于2015-11-11得票数 0
回答已采纳
我试图在SVG中画一个带有阴影的简单圆形，但由于某种原因，顶部和左侧边缘被裁剪了。这在Chrome和Safari中都会发生。
我正在使用我在w3schools教程中找到的代码，经过修改后使用了一个圆圈。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%"
浏览 6提问于2012-09-26得票数 11
回答已采纳
我试图在一个页面上显示一些图像，它们应该以灰度显示，除非鼠标悬停，当它们顺利过渡到彩色时。我让它在IE、Chrome和Firefox上运行得很好，但是它的在Safari 5.x上不工作。问题在于Mac的Safari和Windows的Safari。下面是我到目前为止掌握的代码：
filter: url('desaturate.svg#greyscale');
filter: gray;
-webkit-filter: grayscale(1);
第一行加载外部.svg过滤器(我不使用url("data:.规则，因为我想避免使用)。
第二行适用于IE，似乎与filter:
浏览 6提问于2012-10-02得票数 10
回答已采纳
我添加了带有feGaussianBlur的滤镜到SVG circle，它在Chrome上的效果很不错，不过这个圆圈在Safari上就消失了。 ? ? <filter
id="soft"
filterRes="1200"
colorInterpolationFilters="sRGB"
x="-50%"
y="-50%"
width="200%"
heigh
浏览 21提问于2020-10-16得票数 1
回答已采纳
2回答
我通过向它应用svg feColorMatrix来使用css筛选器属性。它在Firefox和Chrome上运行得很好。但它不适用于狩猎旅行。我一直在玩价值，缩进，供应商前缀，并未能成功地应用我的过滤器在safari。
有人能帮我找出为什么我的过滤器不能在Safari中工作吗？
您可以在这里查看演示
我的svg过滤器和视频元素：
<svg class="defs-only">
<filter
id="blue-tint"
color-interpolation-filters="sRGB"
x="
浏览 0提问于2018-04-13得票数 0
回答已采纳
2回答
我正在尝试将svg过滤器应用到图像中。该滤波器是一幅从黄色到灰色的梯度图。这在Firefox和Safari上非常有效，但在Chrome中，在颜色不同的情况下，过滤器有一个奇怪的结果。
我在这里做了一把小提琴：
过滤器代码
<svg version="1.1" width="0" height="0"><filter id="filter"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0
浏览 1提问于2014-10-01得票数 2
回答已采纳
问题
我正在ForeignObject中创建一些svg图标和一个选择框，以对图表的时间线进行操作。svg包含要将图形设置为的预设日期范围。在进行此操作时，我发现在某些浏览器中，更改复选框将无法正确更新<option>。您将更改svg，但在某些鼠标事件发生之前，内容不会更改。
我的HTML结构如下：
body
svg
defs
svg
g icon
svg
g icon
svg
g icon
svg
g icon
svg
g
浏览 1提问于2019-09-17得票数 0
回答已采纳
我目前正在模糊图像，并使用这些作为背景时，一个图像被包含。我使用下面的svg过滤器，并使用feGaussianBlur和feColorMatrix分两个步骤展开过滤器。这在Chrome中呈现得很完美，但在Safari和移动浏览器中，我看到了奇怪的手工艺品。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter
id="blurry"
width="150%"
height="150%"
浏览 1提问于2020-01-15得票数 0
2回答
动画显示SVG线不跨浏览器工作
、、、、
我正在尝试创建一个使用SVG过滤器和方法来创建渐进式绘制的“发光”线条效果的动画。经过相当多的研究，我终于找到了一些类似的作品：
( SVG路径使其对于如此片段来说太大了)
我尝试的解决方案使用两组坐标，第一组是直线本身，然后是使用SVG辉光过滤器的相同路径。在大多数情况下，动画看起来很好，并接近我想要的外观。
问题是动画显然是资源密集型的，并且在FireFox和Safari中非常笨重。我如何实现同样的动画“发光线”的效果，同时让它在这些浏览器中顺利运行？是否有一种方法可以绕过使用这么大一组坐标的性能，或者是否有更好的方法不使用两组路径来实现发光效果？
同样的，我不使用R2-D2的图像，但是
浏览 6提问于2017-05-13得票数 0
回答已采纳
我试图用下面概述的技术将一个元素从灰度转换为颜色：
CSS
.technical .tech-icon {
width: 33px;
height: 32px;
display: inline-block;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-web
浏览 3提问于2012-09-26得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
