svg html5 编辑工具,HTML5之SVG

SVG API：

SVG是一种可缩放矢量图形，一种二维图形表示语言

与canvas不同的是，在浏览器的开发工具中能查看和编辑SVG结构，SVG嵌入到HTML DOM中了

缩放SVG不会导致图片的质量下降，图片不会模糊

SVG相关词汇：形状、路径、变换、图案和渐变、可重用的内容、文本

创建SVG

简单的形状的绘制

可以将要变换的SVG元素放在一个组中，添加变换属性进行变换，组内成员可以通过id来引用

复用内容,元素用于定义下面要使用的内容,元素定义的内容

图案和渐变(图案可以像素图形或者SVG图形，渐变分为线性渐变和放射性渐变)

x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

SVG路径,path有一个D属性，M代表moveTo，L代表lineTo，Q代表二次曲线，Z代表闭合路径

SVG文本，在浏览器中，文本是可选的，并且能够被搜索引擎搜到

Happy Trails

组合场景(将上述功能组合成一个跑道场景)

Happy Trails in SVG

svg {

border: 1px solid black;

}

x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

Happy Trails!

使用SVG创建交互式应用，添加一个按钮，每添加一个元素其实就是添加一个元素

Happy Trails in SVG

svg {

border: 1px solid black;

}

g[id=Tree]:hover {

opacity: 0.9;

cursor: crosshair;

}

Add Tree

x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

Happy Trails!

id="TreeCounter">

You can remove a

tree by clicking on it.

function removeTree(e) {

var elt = e.target;

if (elt.correspondingUseElement) {

elt = elt.correspondingUseElement; //此段代码目前不知道用意何在

}

elt.parentNode.removeChild(elt);

updateTrees();

}

document.getElementById("AddTreeButton").onclick = function () {

var x = Math.floor(Math.random() * 400); //产生新生成数的X,Y坐标

var y = Math.floor(Math.random() * 600);

var scale = Math.random() + .5; //产生新生成数的缩放比例

var translate = "translate(" + x + "," + y + ")";

var tree = document.createElementNS("http://www.w3.org/2000/svg", "use"); //createElementNS() 方法可创建带有指定命名空间的元素节点

tree.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#Tree");

tree.setAttribute("transform", translate + "scale(" + scale + ")");

document.querySelector("svg").appendChild(tree); //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素

updateTrees();

};

function updateTrees() {

var list = document.querySelectorAll("use"); //querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身

var treeCount = 0;

for (var i = 0; i < list.length; i++) {

if (list[i].getAttribute("xlink:href") == "#Tree") {

treeCount++;

list[i].onclick = removeTree;

}

}

var counter = document.getElementById("TreeCounter");

counter.textContent=treeCount+"trees in forest"; //textContent 属性设置或返回指定节点的文本内容，以及它的所有后代

}

updateTrees();