無法在React中呈現SVG過濾器

我嘗試在使用React（15.0.1）的Web應用程序中將圖形元素<rect>加載到SVG過濾器（本例中爲<feGaussianBlur>）。該代碼類似於此無法在React中呈現SVG過濾器

東西component1.js：

render(){ 
    return(
     <defs> 
     <filter id='blur'> 
      <feGaussianBlur stdDeviation="5" /> 
     </filter> 
     </defs> 
     <component2 /> 
    ); 
}

在component2.js：

render(){ 
    <rect x="some_xpos" 
     y="some_ypos" 
     height="some_height" 
     width="some_width" 
     filter="url(#blur)" 
    > 
    </rect> 
}

所有這些組件都是相同的HTML頁面，但不知何故上呈現整個頁面呈現時不應用過濾器。我特地爲不同的選擇：

選項1：在使用公共URL導出SVG濾鏡自身的.svg文件在公共資源文件夾和url()。由於Chrome瀏覽器問題導致無法工作link
option2：將<filter>放在整個應用呈現的主要（且唯一一個）index.html文件中。我還把它放在了頂部，上面有自己的<svg>標籤。沒有工作。

在我看來，<rect>找不出過濾器在哪裏。我將不勝感激任何意見，如何調試這個或替代加載svg過濾器。

來源

2016-05-11 Ken Liao

這將是更好，如果你表明再現像jsfiddle.net某些航線上的錯誤測試用例[https：//開頭的jsfiddle。 net/pmvo81ac /] –

感謝您的鏈接，將嘗試重新制作 –

我相信這是''中的小寫'c'。適用於大寫字母C''：https://jsfiddle.net/pmvo81ac/1/ – pawel

如果您要直接在DOM中創建SVG元素，則必須在SVG名稱空間中創建SVG元素。從我所看到的，React不支持這一點。 Kaiddo在評論中提到的解決方法是將元素創建爲原始的innerHTML。

來源

2016-10-06 00:55:49

-1

最好的解決方法是使用「風格」，如下所示：

<rect x="some_xpos" 
     y="some_ypos" 
     height="some_height" 
     width="some_width" 
     style={ {filter: 'url(#blur)'} } 
    >

來源

2016-10-06 13:27:33 Beuun

無法在React中呈現SVG過濾器

回答

相關問題