[svg] svg(2) clientRect
在html中可通过document操作元素
<html>
<head>
<title>Nested SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="20" height="20">
<circle id="c" cx="10" cy="10" r="7" fill="green"/>
</svg>
<script type="text/javascript">
var c = document.getElementById('c');
c.setAttribute('fill','blue');
</script>
</body>
</html>
getSVGDocument
contentDocument
还有一个方法可以获取所引用的SVG文档的document对象，那就是getSVGDocument()。
如果使用object或iframe引入SVG文档，除了getSVGDocument()，
还可以使用contentDocument属性来获取其引入文档对应的document对象。
区别在于如果是引入的不是SVG文件，而是XML或者HTML等等，
contentDocuement依然会返回对象，而getSVGDocument()则返回null。
若引入的SVG文档是来自于其它站点的，那么浏览器就会禁止获取document对象。
function setup (document) {
// do something with svg docuemnt
}
setup(document.getElementById('svg-embed').getSVGDocument());
createElementNS
XML是有命名空间(namespace)的
不同于HTML元素对象可以直接对一些属性赋值，
SVG元素对象都需要通过调用setAttribute()方法来设定属性值。
因为大部分属性都是SVGAnimatedLength类型，
即使要通过属性赋值也要写成类似c.r.baseVal.value = 7，多层访问其下属性。
不过像fill、stroke等默认都是undefined，
所以使用setAttribute()是更好的选择。
//js创建元素
var inp = document.createElement('input');
inp.type = 'button';
inp.value = 'button';
inp.name = 'button';
var con = document.getElementById('container');
con.appendChild(inp);
//svg创建元素
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="20" height="20">
<script type="text/javascript">
var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
c.setAttribute('cx', 10);
c.setAttribute('cy', 10);
c.r.baseVal.value = 7;
c.setAttribute('fill', 'green');
document.rootElement.appendChild(c);
</script>
</svg>
a、use、image，若要设置xlink:href属性时都应使用命名空间的方式，否则就不会起作用。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="20" height="20">
<script type="text/javascript">
var a = document.createElementNS('http://www.w3.org/2000/svg','a');
a.setAttributeNS('http://www.w3.org/1999/xlink',
'xlink:href',
'http://blog.iderzheng.com/');
var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
c.setAttribute('cx', 10);
c.setAttribute('cy', 10);
c.r.baseVal.value = 7;
c.setAttribute('fill', 'green');
a.appendChild(c);
document.rootElement.appendChild(a);
</script>
</svg>
createSVGPoint
可以通过设定viewBox来改变自身的坐标系以影响呈现的内容。
在每个SVG元素对象上，都有一个getScreenCTM()的方法，
它会返回一个SVGMatrix来表示元素的坐标系所做过的变换。
此外SVG还有一种SVGPoint类型，它有x和y两个属性可以表示任一一个点，
同时它还有一个matrixTransform()方法可以将点跟某个SVGMatrix相乘得到相应矩阵变换后的点。
SVGPoint只能通过svg元素对象的createSVGPoint()来创建，不能用new SVGPoint()这样的方式。
function click(e) {
// rootElement is specific to SVG document
// documentElemnt is to any XML document include HTML
// they both can retrieve the root element of a document
var r = document.rootElement || document.documentElement,
pt = r.createSVGPoint(),
im = r.getScreenCTM().inverse(); // inverse of tranforma matrix
// set point with window coordination
pt.x = e.clientX;
pt.y = e.clientY;
// convert point to SVG coordination
var p = pt.matrixTransform(im);{
}
Element.getClientRects()
返回一个指向客户端中每一个盒子的边界矩形的矩形集合。
返回值是ClientRect对象集合，该对象是与该元素相关的CSS边框。
每个ClientRect对象包含一组描述该边框的只读属性——left、top、right和bottom，单位为像素，
这些属性值是相对于视口的top-left的。
即使当表格的标题在表格的边框外面，该标题仍会被计算在内。
Element.getBoundingClientRect()
返回元素的大小及其相对于视口的位置。
//css
#a {
width: 500px;
height: 500px;
position: relative;
background: lightblue;
margin: 10px;
}
#b {
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background: lightgrey;
/*margin: 10px;*/
}
//html
<div id="a">
<div id="b"></div>
</div>
//js
let a = document.getElementById('a');
let b = document.getElementById('b')
let coor1 = a.getClientRects();
let coor2 = b.getClientRects();
console.log(coor1[0])
//bottom:510
//height:500
//left:10
//right:510
//top:10
//width:500
console.log(coor2[0])
//bottom:210
//height:100
//left:110
//right:210
//top:110
//width:100
let coor3 = a.getBoundingClientRect();
let coor4 = b.getBoundingClientRect();
console.log(coor3)
//bottom:510
//height:500
//left:10
//right:510
//top:10
//width:500
console.log(coor4)
//bottom:210
//height:100
//left:110
//right:210
//top:110
//width:100
