Skip to content

Instantly share code, notes, and snippets.

@ushiboy
Last active August 2, 2016 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ushiboy/1d2b8f5ac5bf8a67e29bfd1fbd771962 to your computer and use it in GitHub Desktop.
Save ushiboy/1d2b8f5ac5bf8a67e29bfd1fbd771962 to your computer and use it in GitHub Desktop.
SVG Text
bundle.js
### https://raw.github.com/github/gitignore/c751b70cc6ec57de20f918dbf05448333ffa2191/Node.gitignore
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
import React from 'react';
import { render } from 'react-dom';
const content = 'test@foo';
const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text1.innerHTML = content;
text1.setAttribute('fill', 'black');
text1.setAttribute('x', 0);
text1.setAttribute('y', 16);
document.getElementById('screen1').appendChild(text1);
const text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text2.textContent = content;
text2.setAttribute('fill', 'black');
text2.setAttribute('x', 0);
text2.setAttribute('y', 16);
document.getElementById('screen2').appendChild(text2);
const text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text3.appendChild(document.createTextNode(content));
text3.setAttribute('fill', 'black');
text3.setAttribute('x', 0);
text3.setAttribute('y', 16);
document.getElementById('screen3').appendChild(text3);
render(
<svg width="400" height="20">
<text x="0" y="16" fill="black" dangerouslySetInnerHTML={{__html: content }} />
</svg>,
document.getElementById('screen4')
);
render(
<svg width="400" height="20">
<text x="0" y="16" fill="black">{content}</text>
</svg>,
document.getElementById('screen5')
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Text</title>
</head>
<body>
<h1>SVG Text innerHTML Case</h1>
<svg id="screen1" width="400" height="20" ></svg>
<h1>SVG Text textContent Case</h1>
<svg id="screen2" width="400" height="20" ></svg>
<h1>SVG Text createTextNode Case</h1>
<svg id="screen3" width="400" height="20" ></svg>
<h1>React dangerouslySetInnerHTML Case</h1>
<div id="screen4"></div>
<h1>React Case</h1>
<div id="screen5"></div>
<script src="bundle.js"></script>
</body>
</html>
{
"name": "svg-text",
"version": "0.1.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "browserify app.js -t [ babelify --presets [ es2015 react ] ] -o bundle.js"
},
"author": "",
"license": "MIT",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify": "^13.1.0",
"eslint": "^3.2.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment