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

圆是一个图层，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>

如何使用React JS将文本放入SVG圈内？

1 个答案: