framp/React-SVG-Test.html

## React-SVG-Test.html
<!DOCTYPE html>
<html>
  <head>
    <script src="./react-with-addons.js"></script>
    <script src="./JSXTransformer.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
var Item = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            xmlnsXlink: 'http://www.w3.org/1999/xlink',
            image: "http://i.imgur.com/w7GCRPb.png",
            link: 'http://facebook.github.io/react/',
            actuate: 'onRequest',
            show: 'new',
            arcrole: 'http://example.com/iri-arcrole-reference.svg',
            role: 'http://example.com/iri-role-reference.svg',
            title: 'React',
            text: 'React',
            type: 'simple',
            lang: 'en-US',
            space: 'preserve'
        };
    },

    render: function() {
        return (<div>
          <svg xmlnsXlink={this.state.xmlnsXlink} width="100" height="50">
            <image xlinkHref={this.state.image} width="50" height="50" />
            <g transform="translate(60,20)">
                <a
                  xlinkHref={this.state.link}
                  xlinkActuate={this.state.actuate}
                  xlinkShow={this.state.show}
                  xlinkArcrole={this.state.arcrole}
                  xlinkRole={this.state.role}
                  xlinkTitle={this.state.title}
                  xlinkType={this.state.type}
                  >
                  <text
                    xmlLang={this.state.lang}
                    xmlSpace={this.state.space}
                    x="0" y="15" fill="black">
                      {this.state.text}
                  </text>
                </a>
            </g>
          </svg>
          <form>
            <input type="text" valueLink={this.linkState('xmlnsXlink')} /> xmlns<br />
            <input type="text" valueLink={this.linkState('image')} /> image<br />
            <input type="text" valueLink={this.linkState('link')} /> link<br />
            <input type="text" valueLink={this.linkState('actuate')} /> actuate<br />
            <input type="text" valueLink={this.linkState('show')} /> show<br />
            <input type="text" valueLink={this.linkState('arcrole')} /> arcrole<br />
            <input type="text" valueLink={this.linkState('role')} /> role<br />
            <input type="text" valueLink={this.linkState('title')} /> title<br />
            <input type="text" valueLink={this.linkState('text')} /> text<br />
            <input type="text" valueLink={this.linkState('type')} /> type<br />
            <input type="text" valueLink={this.linkState('lang')} /> lang<br />
            <input type="text" valueLink={this.linkState('space')} /> space<br />
          </form>
        </div>);
    }
});

React.render(React.createElement(Item), document.getElementById('content'));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="./react-with-addons.js"></script>
	<script src="./JSXTransformer.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">
	var Item = React.createClass({
	mixins: [React.addons.LinkedStateMixin],
	getInitialState: function() {
	return {
	xmlnsXlink: 'http://www.w3.org/1999/xlink',
	image: "http://i.imgur.com/w7GCRPb.png",
	link: 'http://facebook.github.io/react/',
	actuate: 'onRequest',
	show: 'new',
	arcrole: 'http://example.com/iri-arcrole-reference.svg',
	role: 'http://example.com/iri-role-reference.svg',
	title: 'React',
	text: 'React',
	type: 'simple',
	lang: 'en-US',
	space: 'preserve'
	};
	},

	render: function() {
	return (<div>
	<svg xmlnsXlink={this.state.xmlnsXlink} width="100" height="50">
	<image xlinkHref={this.state.image} width="50" height="50" />
	<g transform="translate(60,20)">
	<a
	xlinkHref={this.state.link}
	xlinkActuate={this.state.actuate}
	xlinkShow={this.state.show}
	xlinkArcrole={this.state.arcrole}
	xlinkRole={this.state.role}
	xlinkTitle={this.state.title}
	xlinkType={this.state.type}
	>
	<text
	xmlLang={this.state.lang}
	xmlSpace={this.state.space}
	x="0" y="15" fill="black">
	{this.state.text}
	</text>
	</a>
	</g>
	</svg>
	<form>
	<input type="text" valueLink={this.linkState('xmlnsXlink')} /> xmlns<br />
	<input type="text" valueLink={this.linkState('image')} /> image<br />
	<input type="text" valueLink={this.linkState('link')} /> link<br />
	<input type="text" valueLink={this.linkState('actuate')} /> actuate<br />
	<input type="text" valueLink={this.linkState('show')} /> show<br />
	<input type="text" valueLink={this.linkState('arcrole')} /> arcrole<br />
	<input type="text" valueLink={this.linkState('role')} /> role<br />
	<input type="text" valueLink={this.linkState('title')} /> title<br />
	<input type="text" valueLink={this.linkState('text')} /> text<br />
	<input type="text" valueLink={this.linkState('type')} /> type<br />
	<input type="text" valueLink={this.linkState('lang')} /> lang<br />
	<input type="text" valueLink={this.linkState('space')} /> space<br />
	</form>
	</div>);
	}
	});

	React.render(React.createElement(Item), document.getElementById('content'));
	</script>
	</body>
	</html>