SVG过滤器使路径在Firefox/Safari/iOS上消失
SVG过滤器是一种用于修改SVG图形外观的技术。它可以通过一系列的操作来对SVG图形进行过滤和处理，例如模糊、颜色调整、阴影等。然而，对于某些特定的情况，使用SVG过滤器可能会导致路径在Firefox、Safari和iOS上消失。
这个问题通常与浏览器对SVG过滤器的支持程度有关。不同的浏览器对SVG过滤器的实现方式和性能优化有所不同，因此可能会出现兼容性问题。
解决这个问题的方法之一是尝试不同的SVG过滤器效果，看看是否能够在不同的浏览器上正常显示。有些过滤器效果可能对特定的浏览器更友好，可以通过尝试不同的过滤器效果来解决路径消失的问题。
另一个解决方法是使用其他技术来替代SVG过滤器。例如，可以考虑使用CSS样式或JavaScript来实现类似的效果。这样可以避免SVG过滤器带来的兼容性问题，并且在不同的浏览器上都能正常显示路径。
需要注意的是，以上解决方法只是一些建议，并不能保证在所有情况下都能解决路径消失的问题。由于浏览器和技术的不断更新，解决这类问题可能需要进一步的研究和实验。
对于使用SVG过滤器的开发者来说，建议在开发过程中进行充分的测试和兼容性验证。可以使用不同的浏览器和设备进行测试，并且关注相关浏览器和SVG过滤器的更新和文档，及时了解和解决兼容性问题。
腾讯云提供了丰富的云计算产品和服务，包括云服务器、云存储、云数据库等。虽然在这个回答中不涉及直接提及腾讯云的相关产品，但您可以访问腾讯云的官方网站以了解更多信息：https://cloud.tencent.com/
相关·内容
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
我使用d3.js在svg元素上绘制一个(多)线图(有相当多的数据点，确切地说是1600 )。这个图位于一个容器中，容器上有一个转换。
在某个事件中，容器会被移动400 in到顶部，通过CSS3转换，这在Chrome中工作得很好。在尝试Safari和Firefox时，我注意到这是非常慢的。经过一些检查后，我可以肯定地说，svg元素在Safari/Firefox (以及可能的其他浏览器)转换过程中被重新绘制(很多)。
是否存在阻止浏览器不断地重新绘制它直到转换完成为止？或者其他的解决办法能让这一切变得流畅？
FYI:如果没有在SVG元素中绘制图表，问题就会消失，所以我确信放缓来自SVG元素。
简化
浏览 4提问于2014-02-07得票数 4
回答已采纳
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
回答已采纳
1回答
我试图在SVG中实现多行可编辑的textfield。我在中有以下代码：
<svg width="1000" height="1000" overflow="scroll">
<g transform="rotate(5)">
<rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/>
</g>
<foreignObject
浏览 2提问于2012-10-06得票数 2
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
回答已采纳
情况是我有一个内联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回答
假设我想使用这个字体：
@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
1回答
下午好,
我正在创建一个基于SVG的程序，在使用safari和mac-firefox打开SVG textpath时，遇到了跨浏览器的问题。它在chrome、windows-firefox和IE上都能很好地工作。
看看这里：
截图：
好：
不好：
有什么想法吗？谢谢
浏览 0提问于2014-11-16得票数 0
2回答
我试图有悬停，以褪色彩色图像为黑白图像。所以我想要做的是在两个类之间使用JqueryUI switchClass和fade
这是我的CSS：
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.
浏览 2提问于2014-06-03得票数 0
我有一个星号图标的最小SVG图像：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<style>
.a {
fill: red;
transform-box: fill-box;
transform-origin: center;
}
</style>
</defs&
浏览 1提问于2020-04-17得票数 1
回答已采纳
问题：
在Safari中，两个滤镜都会显示出来-但都是矩形的全宽/全高，所以只有最上面的一个是可见的。
我如何让它在不同的浏览器上一致地工作？
bug的演示：。在Chrome或Firefox中打开以查看其外观。谢谢!
html：
<svg class='a'>
<defs>
<filter id='hey'>
<feColorMatrix
type='matrix'
result='darken'
values=
浏览 23提问于2018-06-07得票数 0
回答已采纳
如何使图像变成黑色/白色，然后在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
使用Selenium GRID2，如何设置多个远程控件？我们可以使用2台机器(我们称它们为"machine01“和"machine02")，并在它们上安装浏览器(其中一些安装在特定位置)。我们希望这2在GRID2集线器上注册以运行测试用例。
我有第三台需要充当枢纽的机器，我从以下几个方面开始：
java -jar selenium-server-standalone-2.14.0.jar -role hub -grid1Yml grid_configuration.yml
但是如何在yml配置文件中设置不同的远程控制？在本地计算机上进行调查时，我使用了以下配置：
hub
浏览 4提问于2011-12-05得票数 1
测试链接：
我在这里做的是:实现我自己的OverlayView来绘制从一个标记到另一个标记的曲线，并在每一行的末尾使用箭头。我将一个具有一定宽度和高度的div元素添加到地图中，以包含线条和箭头。然后，我将内联SVG代码放在该div中，让浏览器绘制线条和箭头。
如果在Safari或Chrome中查看，会发生一些非常恼人和意想不到的行为。在Safari中，整个SVG图形在超过一定的缩放级别后会消失，而在Chrome中，行尾的箭头会消失，并以随机的缩放级别重新出现。在Firefox和Opera中，这种行为不会发生，并且箭头在任何缩放级别都可见。
不要介意红色的方框和/或一些箭头的位移。这是正在进行的
浏览 4提问于2012-03-07得票数 0
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
回答已采纳
我有一个SVG标志包装在一个锚上的网站服务在几个测试环境。在所有的环境中，除了我们最近构建的环境，这个徽标装载得很好。在最新的环境中，SVG徽标无法在Chrome和Safari中加载，但在Firefox中加载良好。我找不出根本原因，也不知道从哪里开始找。
所讨论的代码类似于以下代码
<a href="/" id="logo" title="home"><img src="/images/logo.svg"></a>
在Chrome和Safari中，服务器返回HTTP 200，但响应不包含数据。结
浏览 2提问于2015-12-10得票数 2
回答已采纳
1回答
我目前在部署了一个Rails webapp，它利用D3.JS和JavaScript来生成与时间相关的特定用户上传的SVG图。图形在Chrome、Safari和Firefox中可以正确呈现，但突出显示刻度标签或滚动会导致图形的某些部分在Safari中消失(但Chrome或Firefox不会消失)。在另一个有类似图表的页面上，这不是问题，可以在上找到。
这是Safari的问题还是我的代码有问题？谢谢。
浏览 5提问于2012-07-18得票数 2
回答已采纳
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回答
我知道这个问题已经被问过了，但我找不到直接的答案。
我正在尝试在页面上显示一些图像，它们应该以灰度显示，除非鼠标悬停，当它们平滑地转换为彩色时除外。我已经让它在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
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
回答已采纳
我在一个代码演示中看到了这个代码。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" />
<feCo
浏览 2提问于2016-01-20得票数 4
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
回答已采纳
1回答
我试图在一个禁用SSLStrip的网站上使用它，我特别用http://键入网站URL，它拒绝在Safari、Chrome和一个随机的中文浏览器中加载，因为重定向太多。
我已经对两位受害者做过这种尝试:在运行iOS 11.1的iOS上使用Safari，在运行Nougat的安卓手机上使用Safari。在这两种情况下，我都无法访问该网站。我已经检查了设置是否工作，因为我能够在我的sslstrip.log文件中看到加密的POST请求。
例如，下面是来自http://my.mit.edu的请求和响应：
请求：
Host: my.mit.edu User-Agent: Mozilla/5.0 (Maci
浏览 0提问于2018-03-14得票数 1
回答已采纳
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
回答已采纳
我正在用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
回答已采纳
我有一些SVG文本可以在Firefox上正常工作，但是在Chrome和Safari中没有出现。
我试过：
将填充添加到svg容器中，以防文本被
切断，
从文本中删除xml:space=“保存”，
内联添加填充颜色。
<svg class="fraction_spinner" width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="CS1_01-int
浏览 1提问于2019-08-09得票数 2
回答已采纳
1回答
我发现Safari & iOS Safari浏览器由于某些原因不能/不显示SVG阴影(过滤器)。至少对我自己来说，阴影不会只显示在Safari iOS和Safari桌面上，它可以在chrome和firefox中工作。
有没有一种方法可以让SVG元素在Safari iOS中显示阴影？这个网站纯粹是为iPad服务的，所以这是的主要错误。
我正在绘制动态箭头，这些箭头可以/将具有不同的维度&阴影偏移。这就是为什么我要使用SVG元素。问题是由于某种原因，SVG阴影在Safari中从未出现过。
这真是令人沮丧。我去了HTML5画布的画箭头，但我发现旋转是荒谬的，无论我怎么做，箭头只是不想
浏览 1提问于2012-01-20得票数 4
我正在使用一个蒙版从我的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
回答已采纳
我试图在文本上使用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回答
在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
1回答
我有一个网页，它有一个SVG的iframe，允许用户在它上绘图。当它们完成后，我希望将它们的图形转换为图像。我该怎么做呢？
(它需要在iOS Safari，Chrome，Firefox，Safari桌面，IE9+中运行)
我更喜欢客户端的解决方案，但是PHP解决方案可以吗？
浏览 4提问于2013-04-27得票数 0
2回答
我似乎找不到iOS中支持的SVG特性的一个很好的列表，我得到的最好的是：
我正在研究开发一个使用很多视觉元素的网页的可行性，我们想使用SVG，我对SVG了解不深，所以我想知道iOS Safari的主要兼容性、性能和缺乏功能的问题是什么。
从上面的链接，我似乎不能使用: SMIL动画。动画作为SVG标签，对吗？该链接显示：“Safari中的部分支持指的是不能在HTML文件中工作。”那么，只要SVG不在HTML文件中，它就可以工作吗？所以这意味着我根本不能使用它？我仍然可以使用Javascript (例如jQuery SVG )进行动画吗？
SVG过滤器，现在我不太清楚它涵盖了什么。在iOS上的
浏览 1提问于2012-07-31得票数 4
回答已采纳
我从来没有见过像这样的浏览器bug。它只发生在特定的Safari浏览器/平台组合上。我在iOS4或Mac Leopard上使用Safari5.1.1得到了预期的结果，但当我仅在Lion或iOS5上尝试Safari5.1或5.1.1时，就会出现错误。
当我通过foreignObject元素将画布元素嵌入到内联svg文档中时，就会出现这种情况。画布通常尊重应用于foreignObject的所有svg转换，这在Chrome/Firefox和Safari (iOS4，Snow Leopard)上工作得很好。但是当我在Lion上使用Safari时，iOS5画布渲染时没有应用任何变换。画布渲染也在所有SV
浏览 3提问于2011-10-25得票数 0
当我测试下面的代码时，我有一个Safari的问题，但是动画在Chrome和Firefox中工作得很好。
HTML：
<div>
<svg width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="690" y2="0"></line>
<line class="left" x1="0" y1
浏览 0提问于2015-08-23得票数 2
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
回答已采纳
所以我有一个包含文本元素的SVG文件。示例：
<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>
当我指定iOS中包含的字体系列(比如Helvetica或Futura)时，一切都很正常。然而，一旦我通过@ font -face指定了一个字体，它就不能在iOS上工作了，而它在桌面Safari，Chrom
浏览 2提问于2011-03-06得票数 5
回答已采纳
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
回答已采纳
我在IE11中的字体有问题。我使用了以下字体，它在Chrome、Safari和Firefox中运行良好，但在IE中就不行了。
@font-face {
font-family: 'Avenir';
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('fonts/avenirnextltpro-mediumcn.woff') format('woff'),
浏览 0提问于2014-01-11得票数 5
4回答
所以，我有关于图片悬停效果的代码。它在Chrome上运行得很好，但问题是当我在Firefox上打开网站时。下面是代码：
img.img-responsive {
/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(1);
/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg
浏览 0提问于2014-09-16得票数 1
我有一堆用各种软件(Inkscape，CorelDraw X7)创建的SVG映像，我发现用CorelDRAW X7制作的SVG没有在iOS设备中显示文本。
在上面的链接中，我有一个工作图像和非工作图像的示例。如果您使用Safari或Chrome在iOS设备上打开它，则底部图像的数字会消失，但是显示的是顶部图像。
知道为什么吗？
两者都使用一个<text>标记。
浏览 1提问于2016-03-04得票数 0
回答已采纳
1回答
在Safari中一切正常，在Firefox中，svg的大小不正确，当我转换它时，它就消失了。我运行的是Safari Mac 5.1.7和Firefox Mac 15.0。
代码是用d3创建的，但我只是提供了html。
现在您可以看到它：
现在你不需要了： (已经编辑好了，现在可以用了)
我想我在什么地方犯了一个愚蠢的错误，但我就是看不出来！
浏览 1提问于2012-08-30得票数 3
回答已采纳
1回答
手机帆布中断上的SVG剪辑路径
、、、、
我在画布上设置了一个SVG剪辑路径。在画布中绘图可以在我的计算机上使用Firefox、Edge和Chrome，但在我的iPhone上，画布在火狐和Safari中就消失了。
document.getElementById('can').onclick = function(evt) {
evt.target.getContext('2d').fillRect(125, 50, 50, 50);
};
canvas {
background: #0f0;
clip-path: url(#diamond);
}
<p>Click in ca
浏览 12提问于2022-08-08得票数 0
回答已采纳
我在Mac和IOS Safari滚动条上遇到了一个非常奇怪的问题。Google Maps和css定位之间似乎有一些疯狂的互动，只影响Mac和IOS Safari。
此链接在Chrome、Firefox、Internet Explorer和Windows上的Safari上运行良好。
这里有一个指向相关页面的链接：
您需要查看页面才能对问题有个了解。在Safari Mac中，滚动条不起作用。我使用jScrollPane向滚动条添加样式。我已经做了相当多的调试，据我所知safari没有正确地应用CSS "top“参数。
如果我删除谷歌地图。这个问题就消失了。(此页面有普通滚动条： )
有谁有
浏览 2提问于2011-10-20得票数 0
回答已采纳
2回答
几周后，我开始使用SVG，所以我创建了一个.glow类。当添加类时，SVG在Safari上消失，我不知道原因，也不知道如何修复它。我试图添加一个父div并给它一个.glow类，但这只会使它在FireFox中消失(但是它在Safari中正确显示.？)我该如何解决这个问题？
我的SVG是：
<svg width="1517px" height="404px" viewBox="0 0 1517 404" version="1.1"
xmlns="http://www.w3.org/2000/svg"
浏览 1提问于2016-04-13得票数 0
回答已采纳
我有字体GothamBold，GothamBook和GothamThin。我将CSS中的字体设置为：
@font-face {
font-family: 'GothamBold';
src: url("../../fonts/GothamBold.eot"); /* IE9 Compatibility Modes */
src: url("../../fonts/GothamBold.eot?#iefix") format("embedded-opentype"), /* Safari, Android,
浏览 0提问于2014-09-18得票数 1
回答已采纳
我用这些滤镜来降低图像的饱和度：
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
回答已采纳
有人能告诉我如何修改下面的代码以在所有浏览器中实现平滑的淡入淡出过渡吗？
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.3333
浏览 0提问于2012-12-02得票数 1
我正在使用svg过滤器在垂直堆叠的三个圆圈之间创建一个“粘性”混合。在Chrome/Firefox (减去一些平滑效果)中，我得到了想要的效果。在Safari中，我得到了一些非常起伏和丑陋的东西。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo" x="0" y="0" color-interpolation-filters="sRGB
浏览 0提问于2016-09-01得票数 2
1回答
我有一个美国地图与某些地区分组。在每个区域的悬停时，我已经应用了一个阴影。在Firefox中工作得很好！但在Safari中，svg对象组在悬停时消失，而在chrome中，什么也不会发生。因为这是一个悬停效果，所以我不能将那些def放入其他地方引用的def中。对此有合理的解决方案吗？
这是我尝试使用的CSS：
filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
-webkit-filter: drop-shadow( 5px 5px 3px rgba(0,0,0,0.5) );
z-index: 1;
我将它应用于内联SVG图像中的一组形状。
浏览 0提问于2016-05-17得票数 0
我最近发表了一个网站，一个简单的SVG动画熊猫火箭上。一旦用户向下滚动，图像就会改变为另一个SVG，熊猫的动画会从屏幕上上下移动。
网站：
我使用这个简单的脚本来实现它：
<div style="left:10%;" id="rocket" >
<img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" />
</div>
<script>
jQuery(win
浏览 2提问于2018-02-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
