SVG重複ID在一個頁面上

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之外的所有SVG中刪除重複的過濾器。或者，您可以將過濾器移至單獨的<svg>，以供所有其他人蔘考。

複製id屬性會破壞SVG的主要方式是它依賴於瀏覽器來引用哪一個。但是，這也意味着，如果所有的過濾器都是相同的，那麼這個問題不會影響到你。因爲任何特定的瀏覽器選擇哪個過濾器都無關緊要。