如何使用React JS在SVG圆中放置文本？

Question

我有以下代码：

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

我正在尝试在圈子中添加一些文本，但发现它绝对困难。有什么/某些附加组件可以帮助我吗？

Answer 1

圆圈是一个图层，文本节点也是一个图层。您必须将它们作为单独的图层，并使它们看起来好像它们属于一起：

<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>