Rail24 Rail24 - 7 months ago 84
Javascript Question

How can I place text inside an SVG circle with React JS?

I have the following code:

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


I'm trying to get some text inside the circle but finding it absolutely difficult. Is there something/some add-on that can help me with this?

Answer

A circle is a layer, and so is a Text node. You have to have them as separate layers and make them look as if they belong together:

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