framp/React-SVG-getMarkupWrap-Test.html

## React-SVG-getMarkupWrap-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 {
          images: []
        };
    },

    componentDidMount: function() {
        this.setState({
            xmlnsXlink: 'http://www.w3.org/1999/xlink',
            image: 'http://i.imgur.com/w7GCRPb.png',
            images: ['http://i.imgur.com/w7GCRPb.png', 'http://i.imgur.com/LQIsf.jpg'],
            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() {
        var state = this.state;
        return (<div>
              <svg xmlnsXlink={state.xmlnsXlink} width="500" height="50">
                <defs>
                    {state.images.map(function(image,i){
                      return <pattern key={i} id={'pattern' + i} width="50" height="50">
                        <image xlinkHref={image} width="50" height="50" />
                      </pattern>
                    })}

                    <g id="shape">
                        <rect x="50" y="50" width="50" height="50" />
                        <circle cx="50" cy="50" r="50" />
                    </g>
                  </defs>
                <image xlinkHref={state.image} width="50" height="50" />
                <g transform="translate(60,20)">
                    <a
                      xlinkHref={state.link}
                      xlinkActuate={state.actuate}
                      xlinkShow={state.show}
                      xlinkArcrole={state.arcrole}
                      xlinkRole={state.role}
                      xlinkTitle={state.title}
                      xlinkType={state.type}
                      >
                      <text
                        xmlLang={state.lang}
                        xmlSpace={state.space}
                        x="0" y="15" fill="black">
                          {state.text}
                      </text>
                    </a>
                </g>
                <path transform="translate(110,0)" fill="url(#pattern1)" d="M50 0 L0 50 L50 50 Z"></path>
              </svg>
          <form>
            <input type="text" valueLink={this.linkState('xmlnsXlink')} /> xmlns<br />
            <input type="text" valueLink={this.linkState('image')} /> image (http://i.imgur.com/LQIsf.jpg)<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 {
	images: []
	};
	},

	componentDidMount: function() {
	this.setState({
	xmlnsXlink: 'http://www.w3.org/1999/xlink',
	image: 'http://i.imgur.com/w7GCRPb.png',
	images: ['http://i.imgur.com/w7GCRPb.png', 'http://i.imgur.com/LQIsf.jpg'],
	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() {
	var state = this.state;
	return (<div>
	<svg xmlnsXlink={state.xmlnsXlink} width="500" height="50">
	<defs>
	{state.images.map(function(image,i){
	return <pattern key={i} id={'pattern' + i} width="50" height="50">
	<image xlinkHref={image} width="50" height="50" />
	</pattern>
	})}

	<g id="shape">
	<rect x="50" y="50" width="50" height="50" />
	<circle cx="50" cy="50" r="50" />
	</g>
	</defs>
	<image xlinkHref={state.image} width="50" height="50" />
	<g transform="translate(60,20)">
	<a
	xlinkHref={state.link}
	xlinkActuate={state.actuate}
	xlinkShow={state.show}
	xlinkArcrole={state.arcrole}
	xlinkRole={state.role}
	xlinkTitle={state.title}
	xlinkType={state.type}
	>
	<text
	xmlLang={state.lang}
	xmlSpace={state.space}
	x="0" y="15" fill="black">
	{state.text}
	</text>
	</a>
	</g>
	<path transform="translate(110,0)" fill="url(#pattern1)" d="M50 0 L0 50 L50 50 Z"></path>
	</svg>
	<form>
	<input type="text" valueLink={this.linkState('xmlnsXlink')} /> xmlns<br />
	<input type="text" valueLink={this.linkState('image')} /> image (http://i.imgur.com/LQIsf.jpg)<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>