<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg</title>、
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
svg .pumpkin {
fill: yellow;
stroke: orange;
stroke- 5;
}
</style>
</head>
<body>
<svg width="500" height="50">
<!--rect元素会画出一个矩形 可以用x和y来指定它的左上角的位置，而用width和height指定其大小-->
<rect x="0" y="0" width="500" height="50"/>
<!--circle元素会画出一个圆。可以用cx和cy来指定圆心位置，而用r来指定其半径。 -->
<circle cx="250" cy="25" r="25"/>
<!--ellipse元素椭圆，只不过它在每个轴上的半径可以不一样。因此，半径r变成了rx和ry -->
<ellipse cx="250" cy="25" rx="100" ry="25"/>
<!--line元素用来画一条线段。它使用x1和y1指定线段的一个端点位置，而用x2和y2来指定另外一端的位置。笔画stroke的颜色也必须指定-->
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
<!--text用于渲染文本。它使用x指定文本左边界的位置，用y来指定基线(baseline)的垂直坐标。-->
<text x="250" y="50" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>
</svg>
<!--svg样式
fill — 一个颜色值。和CSS一样，颜色可以有几种指定方式
颜色名称。比如orange
十六进制数。比如#3388aa或#38a
RGB值。比如rgb(10,150,20)
RGB值加上不透明度。rgba(10,150,20,0.5)
stroke — 也是一个颜色值，即画线时的颜色
stroke-width — 一个数值(一般是以像素为单位)
opacity — 0到1之间的一个数值，0表示完全透明，1表示完全不透明
通过text，你可以使用下面这些属性，它们含义和CSS是保持一致的。
font-family
font-size
-->
<svg width="500" height="50">
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
<circle cx="100" cy="25" r="22" class="pumpkin"/>
</svg>
<!--图层和绘制顺序-->
<!-- 将SVG视为画布就很好理解了。先画的总是被后画的给掩盖，因而后画的形状表现为最上面。-->
<svg>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>
<!--透明度-->
<!-- 将SVG视为画布就很好理解了。先画的总是被后画的给掩盖，因而后画的形状表现为最上面。-->
<svg>
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>
</svg>
<svg>
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="yellow"stroke="red" stroke-width="10" opacity="0.1"/>
</svg>
<!--D3.js生成svg-->
<script type="text/javascript">
var h=50;
var w=500;
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
var dataset = [ 5, 10, 15, 20, 25 ];//设置数据源
var circles = svg.selectAll("circle").data(dataset) .enter().append("circle");
circles.attr("cx",function(d,i){
return (i*50)+25;
})
.attr("cy",h/2)
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
})
.attr("r",function(d){
return d;
});
</script>
</body>
</html>