React中的曲線文本（SVG textPath不工作）

我正在尋找在我的React頁面頂部有一個弧形標題。我期待遠離JQuery，所以我使用SVG。React中的曲線文本（SVG textPath不工作）

這是我寫的代碼，其工作之外的反應：

<svg width='100%'> 
    <defs> 
     <path id="bigArc" d="m0,170 a800,800 0 0 1 800,0"/> 
    </defs> 
    <text x="200" fill='#003399' style="font-size: 80px;"> 
     <textPath xlink:href="#bigArc" > 
      Come on in... 
     </textPath> 
    </text> 
</svg>

這是我的非工作代碼裏面陣營回報（）：

<svg width='500px'> 
    <defs> 
     <path id='bigArc' d='m0,170 a800,800 0 0 1 800,0'/> 
    </defs> 
    <text x='200' fill='#003399' style={{ fontSize: 80 }} > 
     <textPath xlinkHref='#bigArc' > 
      Come on in... 
     </textPath> 
    </text> 
</svg>

此刻，我的陣營頁面確實顯示「Come on in ...」文字，但它是而不是彎曲。看起來React正在努力解釋<textPath>。

我沒有得到任何控制檯錯誤，並且我的代碼確實生成，但文本不遵循弧路徑。

我正在使用ES6，反應0.14.2和react-dom^0.14.2。

來源

2015-11-18 Fernando

textPath目前不支持，所以你不得不訴諸使用dangerouslySetInnerHTML。

let textPath = `<textPath xlink:href="#bigArc">Come on in...</textPath>`; 
<text dangerouslySetInnerHTML={{__html: textPath }}></text>;

Demo

來源

2015-11-18 11:36:49

感謝您的回答。我只是想知道是否有危險的SetInnerHTML安全問題，因爲這是一個生產應用程序。你認爲這會是一種潛在的XSS風險嗎？或者在這種情況下不會呢？ – Fernando

是的，這是一個巨大的安全風險，尤其是如果你在你的'textPath'變量中進行用戶輸入，除此之外，如果這是你正在做的唯一的事情，並且你已經對它進行了清理並檢查了它，你應該沒事的。 http://facebook.github.io/react/tips/dangerously-set-inner-html.html –