Question

我有想要在不同浏览器中模糊的图像。我发现的最好的方法是使用SVG。我在一个页面上有多个这些SVG。

如何处理ID，因为ID在页面上应该是唯一的。

<svg>
<filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="9" /></filter>
<image xlink:href="/img.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" filter="url(#blur)" />
</svg>

<svg>
<filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="9" /></filter>
<image xlink:href="/img2.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" filter="url(#blur)" />
</svg>

Answer 1

如果您使用SVG进样器，则在进样期间ID将被唯一。 SVGInject在注入期间会为每个引用的ID添加一个随机后缀，以避免ID冲突。例如，filter1可能会变成filter1--inject-Ed83kO72。

Answer 2

如果过滤器全部相同，那么您只需要在页面上使用一个过滤器。您可以从除一个SVG之外的所有SVG中删除重复的过滤器。或者，您可以将过滤器移动到可由所有其他人引用的单独<svg>。

重复id属性将破坏SVG的主要方式是它依赖于浏览器，哪一个被引用。但是，这也意味着，如果您的所有过滤器都相同，则该问题不会对您产生影响。因为任何特定的broswer选择哪个过滤器都不重要。

SVG在一个页面上复制id

2 个答案: