Skip to content

Instantly share code, notes, and snippets.

@biesnecker
Created October 22, 2014 15:29
  • Star 22 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save biesnecker/42a5fb1b54b67c6356ed to your computer and use it in GitHub Desktop.
/** @jsx React.DOM */
var SVGComponent = React.createClass({
render: function() {
return this.transferPropsTo(
<svg>{this.props.children}</svg>
);
}
});
var Rectangle = React.createClass({
render: function() {
return this.transferPropsTo(
<rect>{this.props.children}</rect>
);
}
});
var Circle = React.createClass({
render: function() {
return this.transferPropsTo(
<circle>{this.props.children}</circle>
);
}
});
var Ellipse = React.createClass({
render: function() {
return this.transferPropsTo(
<ellipse>{this.props.children}</ellipse>
);
}
});
var Line = React.createClass({
render: function() {
return this.transferPropsTo(
<line>{this.props.children}</line>
);
}
});
var Polyline = React.createClass({
render: function() {
return this.transferPropsTo(
<polyline>{this.props.children}</polyline>
);
}
});
var DynamicSVGComponent = React.createClass({
getInitialState: function() {
return ({
shape: 0,
size: 0,
color: 0
});
},
changeShape: function() {
var n = this.state.shape + 1;
this.setState({
shape: n < 3 ? n : 0
});
},
changeSize: function() {
var n = this.state.size + 1;
this.setState({
size: n < 4 ? n : 0
});
},
changeColor: function() {
var n = this.state.color + 1;
this.setState({
color: n < 4 ? n : 0
});
},
render: function() {
var color = ['red', 'green', 'blue', 'orange'][this.state.color];
var size = (this.state.size * 20) + 20;
var shape;
switch (this.state.shape) {
case 0:
var x = 50 - (size / 2);
var y = 50 - (size / 2);
shape =
<Rectangle
key="the-shape"
x={x}
y={y}
width={size}
height={size}
fill={color} />;
break;
case 1:
shape =
<Circle
key="the-shape"
cx="50"
cy="50"
r={size / 2}
fill={color} />;
break;
case 2:
shape =
<Ellipse
key="the-shape"
cx="50"
cy="50"
rx={size / 2}
ry={size / 2 * 0.75}
fill={color} />;
break;
}
return(
<table>
<tr>
<td width="75%">
<SVGComponent height="100" width="100">
{shape}
</SVGComponent>
</td>
<td>
<button onClick={this.changeShape}>
Shape
</button><br />
<button onClick={this.changeSize}>
Size
</button><br />
<button onClick={this.changeColor}>
Color
</button>
</td>
</tr>
</table>
)
}
});
// First example
React.renderComponent(
<SVGComponent height="50" width="50" />,
document.getElementById('svg_mount_example')
);
// Rectangle example
React.renderComponent(
<SVGComponent height="100" width="100">
<Rectangle height="50" width="50" x="25" y="25" />
</SVGComponent>,
document.getElementById('svg_rectangle')
);
// Circle example
React.renderComponent(
<SVGComponent height="100" width="100">
<Circle cx="50" cy="50" r="25" />
</SVGComponent>,
document.getElementById('svg_circle')
);
// Ellipse example
React.renderComponent(
<SVGComponent height="100" width="100">
<Ellipse cx="50" cy="50" rx="25" ry="15" />
</SVGComponent>,
document.getElementById('svg_ellipse')
);
// Colors example
React.renderComponent(
<SVGComponent height="100" width="230">
<Circle
cx="50" cy="50" r="25"
fill="mediumorchid" />
<Circle
cx="125" cy="50" r="25"
fill="#ff0099" />
<Circle
cx="200" cy="50" r="25"
fill="none"
stroke="crimson" />
</SVGComponent>,
document.getElementById('svg_colors')
);
// Straight line example
React.renderComponent(
<SVGComponent height="100" width="100">
<Line x1="25" y1="25" x2="75" y2="75"
strokeWidth="5"
stroke="orange" />
</SVGComponent>,
document.getElementById('svg_straight_line')
);
// Polyline example
React.renderComponent(
<SVGComponent height="100" width="100">
<Polyline
points="25,25 25,75 50,75 50,50 75,25"
strokeWidth="5"
stroke="orange"
fill="none" />
</SVGComponent>,
document.getElementById('svg_polyline')
);
// Final example
React.renderComponent(
<DynamicSVGComponent />,
document.getElementById('dynamic_svg')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment