Question

我有一个内联svg，其上应用了一个过滤器，用于SVG右侧和底部的阴影效果。

<div id="d78" class="drag" style="width: 52px; margin: 0 auto;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" >
       <defs>
           <filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
             <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
             <feGaussianBlur in="offset2" stdDeviation="3"  result="blur2">/feGaussianBlur>

           <feMerge>
               <feMergeNode in="blur2"></feMergeNode>
               <feMergeNode in="SourceGraphic"></feMergeNode>
           </feMerge>
           </filter>
        </defs>
            <rect class="rrfNode" fill="#4B4F54"  x="0" y="0" width="130" height="130" style="filter: url(#blurFilter2); " />
</svg>

容器div是可拖动的，可通过jquery UI插件调整大小。容器div上附有一个颜色选择器图标，点击它时会显示调色板，并且在选择任何颜色时，svg rect会更改为我编写了一些jquery的特定颜色。

现在，当我调整svg的大小，然后尝试使用颜色选择器来改变svg rect的颜色时，svg就会从视图中消失，即使我可以看到当我检查svg中的元素时svg颜色已经设置Chrome浏览器。改变颜色的jquery代码是：

$(document).on('changeColor','.fa-eyedropper',function(e) {
        $(this).parents(".ui-draggable").find(".rrfNode").css({ fill:                        color.toHex()});
});

在我调整svg的大小后，看不见的svg再次出现。

当我删除过滤器时，此问题得到解决。但我需要保持调整大小和颜色选择器以及过滤器。

我怀疑这是过滤器的问题，但我无法弄明白。搜索并试图解决这个错误2天后，我提出这个问题。请帮忙。

Answer 1

找出这种奇怪行为背后的原因。所有svg图像中的过滤器ID都是相同的，因此对任何svg的任何更改都会导致其他svg图像的阴影随着图像的内容而消失，实际上图像将消失。我更改了svg图像的过滤器ID，这样所有svgs都有唯一的过滤器ID，这解决了我的问题。我这是一个非常愚蠢的错误。

调整大小后SVG填充颜色更改使svg不可见

1 个答案: