如何使用React JS將文本置於SVG圈內？

我有以下代碼：如何使用React JS將文本置於SVG圈內？

import React from 'react'; 

var SVGComponent = React.createClass({ 
    render: function() { 
     return <svg {...this.props}>{this.props.children}</svg>; 
    } 
}); 

var Circle = React.createClass({ 
    render: function() { 
     return <circle {...this.props}>{this.props.children}</circle>; 
    } 
}); 

var MakeCircles = React.createClass({ 

    render: function() { 
     return(
      <div> 
       <SVGComponent height="110" width="500"> 
        <Circle 
         cx="50" cy="55" r="45" 
         fill="none" 
         stroke="#F0CE01" strokeWidth="4" />  
       </SVGComponent> 
      </div> 
     ); 
    } 
}); 
export default MakeCircles

我試圖讓圈內的一些文字，但發現它絕對是困難的。有什麼/某些插件可以幫助我嗎？

來源

2015-08-28 Rail24

你是什麼意思，「試圖讓一些文本在圈內」？你的例子中的文字在哪裏？ – Pcriulan

對不起，我把它從代碼中取出，因爲它沒有工作。我試過把它放在SVGComponent標籤之外，但似乎我需要依靠定位才能把它放到正確的位置。我希望有一個更優雅的解決方案，可能涉及我創建的SVGComponent或Circle類。 – Rail24

你想讓圓圈成爲一個設定的大小，或調整到文本的大小？ – Mark

圓是一個圖層，Text也是一個節點。你必須讓它們作爲單獨的圖層，並使它們看起來好像它們屬於一起：

<SVGComponent height="110" width="500"> 
    <Circle cx="50" cy="55" r="45" fill="none" stroke="#F0CE01" strokeWidth="4" /> 
    <text textAnchor="middle" x="250" y="55">Circle Text</text> 
</SVGComponent>

來源

2015-08-29 00:21:46 owenconti

微小的事情：'文本錨'應該是React中的'textAnchor'。 – ArneHugo

好抓@ArneHugo – owenconti

如何使用React JS將文本置於SVG圈內？

回答

相關問題