Skip to content

Instantly share code, notes, and snippets.

@cool-Blue

cool-Blue/Selecting SVG camelCase

Forked from mbostock/index.html
Last active August 29, 2015 14:22
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 cool-Blue/14f575ae6945769aca39 to your computer and use it in GitHub Desktop.
Save cool-Blue/14f575ae6945769aca39 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

In Webkit and Blink

Add a textPath element using camelCase

document.createElementNS("http://www.w3.org/2000/svg", "textPath")  

  •  Wrap it in a `text` element and add a `xlink:href`  

  •  Reference with `.setAttributeNS` and put text on `.textContent`  

  •  Try to find it with `querySelectorAll` and `querySelector` using "textPath" - **FAIL**  

  •  Try to find it with `querySelectorAll` and `querySelector` using "textpath" - **FAIL**  

  •  Try to find it with `getElementsByTagName` using "textPath" - **SUCCESS**  

  •  Try to find it with `getElementsByTagName` using "textpath" - **FAIL**  

  •  Check if text is rendered on textPath - **SUCCESS**

Add a textPath element using lowercase

document.createElementNS("http://www.w3.org/2000/svg", "textpath")
  • Wrap it in a text element and add a xlink:href
  • Reference with .setAttributeNS and put text on .textContent
  • Try to find it with querySelectorAll and querySelector using "textPath" - SUCCESS
  • Try to find it with querySelectorAll and querySelector using "textpath" - SUCCESS
  • Try to find it with getElementsByTagName using "textPath" - FAIL
  • Try to find it with getElementsByTagName using "textpath" - SUCCESS
  • Check if text is rendered on textPath - FAIL
Raw
readme.md.bak
## In Webkit and Blink ##
### Add a textPath element using **camelCase** ###
document.createElementNS("http://www.w3.org/2000/svg", "textPath")
* Wrap it in a `text` element and add a `xlink:href`
* Reference with `.setAttributeNS` and put text on `.textContent`
* Try to find it with `querySelectorAll` and `querySelector` using "textPath" - **FAIL**
* Try to find it with `querySelectorAll` and `querySelector` using "textpath" - **FAIL**
* Try to find it with `getElementsByTagName` using "textPath" - **SUCCESS**
* Try to find it with `getElementsByTagName` using "textpath" - **FAIL**
* Check if text is rendered on textPath - **SUCCESS**
### Add a textPath element using **lowercase** ###
document.createElementNS("http://www.w3.org/2000/svg", "textpath")
* Wrap it in a `text` element and add a `xlink:href`
* Reference with `.setAttributeNS` and put text on `.textContent`
* Try to find it with `querySelectorAll` and `querySelector` using "textPath" - **SUCCESS**
* Try to find it with `querySelectorAll` and `querySelector` using "textpath" - **SUCCESS**
* Try to find it with `getElementsByTagName` using "textPath" - **FAIL**
* Try to find it with `getElementsByTagName` using "textpath" - **SUCCESS**
* Check if text is rendered on textPath - **FAIL**
Raw
get browser info.js
/// <reference path="../../SO Questions/Pie Chart/d3/d3 CB.js" />
function get_browser_info() {
var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\w,\.]+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return { name: 'IE', version: (tem[1] || '') };
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/)
if (tem != null) { return { name: 'Opera', version: tem[1] }; }
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); }
return M[0] + "\tversion: " + M[1]
};
function setAttributes(e, desc) {
var ns;
for (var attr in desc) {
if (ns = d3_ns.qualify(attr))
e.setAttributeNS(ns, attr, desc[attr]);
else
e.setAttribute(attr, desc[attr]);
}
return e;
}
var d3_nsPrefix = {
svg: "http://www.w3.org/2000/svg",
xhtml: "http://www.w3.org/1999/xhtml",
xlink: "http://www.w3.org/1999/xlink",
xml: "http://www.w3.org/XML/1998/namespace",
xmlns: "http://www.w3.org/2000/xmlns/"
};
d3_ns = {
prefix: d3_nsPrefix,
qualify: function (name) {
var i = name.indexOf(":"), prefix = name;
if (i >= 0) {
prefix = name.slice(0, i);
name = name.slice(i + 1);
}
//simplified by nailing it to a piece of wood...
return d3_nsPrefix.hasOwnProperty(prefix) ? d3_nsPrefix[prefix] : null;
}
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
svg {
position: absolute;
}
body {
white-space: pre;
font: 12px Courier;
}
</style>
</head>
<body>
<a href="fullsize.png">results for Chrome version: 43.0.2357.124</a><br />
<script src="get browser info.js"></script>
<script type="text/javascript">
var ns = "http://www.w3.org/2000/svg",
svg = document.body.appendChild(setAttributes(document.createElementNS(ns, "svg"),
{ height: "320", width: "400" }));
draw("textPath", svg);
document.writeln(get_browser_info());
write(document, "querySelector", "textPath"); // fail
write(document, "querySelector", "textpath"); // fail
writeAll(document, "querySelectorAll", "textPath"); // fail
writeAll(document, "querySelectorAll", "textpath"); // fail
writeAll(document, "getElementsByTagName", "textPath"); // success!
writeAll(document, "getElementsByTagName", "textpath"); // fail
write(svg, "querySelector", "textPath"); // fail
write(svg, "querySelector", "textpath"); // fail
writeAll(svg, "querySelectorAll", "textPath"); // fail
writeAll(svg, "querySelectorAll", "textpath"); // fail
writeAll(svg, "getElementsByTagName", "textPath"); // success!
writeAll(svg, "getElementsByTagName", "textpath"); // fail
writeAll(svg, "querySelectorAll", "*"); // success!
draw("textpath", svg);
function write(element, method, selector) {
var result = element[method](selector);
document.write(element + " " + method + "(" + selector + "): ");
if (result) document.write(result); else document.write("FAIL");
document.writeln("");
}
function writeAll(element, method, selector) {
var results = element[method](selector),
i = -1,
n = results.length;
document.write(element + " " + method + "(" + selector + "): ");
if (n) {
while (++i < n) {
document.write(results[i]);
if (i < n - 1) document.write(", ");
}
} else document.write("FAIL");
document.writeln("");
}
function draw(tp, svg) {
var indx = svg.getElementsByTagName("g").length,
dx = indx * 200, p1 = [-100, 0], p2 = [100, 0],
group = svg.appendChild(setAttributes(document.createElementNS(ns, "g"),
{ transform: "translate(" + (100 + dx) + ",300)" })),
path = group.appendChild(setAttributes(document.createElementNS(ns, "path"),
{ id: "myPath" + indx, d: "M" + p1 + " A100,70 0 0,1 " + p2, fill: "none", stroke: "black", })),
tpLabel = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { "text-anchor": "middle", dy: -20 })),
text = group.appendChild(setAttributes(document.createElementNS(ns, "text"), { dy: 20 })),
testTp = text.appendChild(setAttributes(document.createElementNS(ns, tp),
{ id: "testTextPath", "xlink:href": "#myPath" + indx, startOffset: 100, }));
testTp.textContent = tp;
tpLabel.textContent = tp;
}
</script>
</body>
</html>
Raw
Selecting SVG camelCase
Cannot find camelCase element, will not render text on textPath if the element is inserted in lower case.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment