1.svg基础
话不多说直接上代码。
<svg width=500 height=960> ???<rect x="0" y="0" width="500" height="50"/> ???<ellipse cx="250" cy="225" rx="100" ry="25"/> ???<line x1="0" y1="120" x2="500" y2="50" stroke="black"/> ???<text x="250" y="155" font-family="sans-serif" ????????????font-size="25" fill="gray">Easy-peasy</text> ???<circle cx="25" cy="80" r="20" ???????????fill="rgba(128, 0, 128, 0.75)" ????????????stroke="rgba(0, 255, 0, 0.25)" ????????????stroke-width="100"/> ???<circle cx="75" cy="80" r="20" ???????????fill="rgba(0, 255, 0, 0.75)" ???????????stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/> ???<circle cx="125" cy="80" r="20" ???????????fill="rgba(255, 255, 0, 0.75)" ???????????stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/> ???<rect x="0" y="300" width="30" height="30" fill="purple"/> ???<rect x="20" y="305" width="30" height="30" fill="blue"/> ???<rect x="40" y="310" width="30" height="30" fill="green"/> ???<rect x="60" y="315" width="30" height="30" fill="yellow"/> ???<rect x="80" y="320" width="30" height="30" fill="red"/> ???<circle cx="25" cy="425" r="22" class="pumpkin"/> ???<circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/> ???<circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/> ???<circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/> ???<circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/> ???<circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/> ???<circle cx="25" cy="625" r="20" fill="purple" ????????????stroke="green" stroke-width="10" ???????????opacity="0.9"/> ???<circle cx="65" cy="625" r="20" fill="green" ???????????stroke="blue" stroke-width="10" ???????????opacity="0.5"/> ???<circle cx="105" cy="625" r="20" fill="yellow" ???????????stroke="red" stroke-width="10" ???????????opacity="0.1"/></svg>
话不多说直接上效果图
2.d3 svg
话不多说上代码。
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>testD3-7-drawSVG.html</title> ???<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script><style type="text/css"> ???</style></head><body><script type="text/javascript"> ???// SVG尺寸 ???var w = 500; ???var h = 50; ???// 数据 ???var dataset = [ 5, 10, 15, 20, 25 ]; ???// 创建SVG容器 ???var svg = d3.select("body") ???????????????.append("svg") ???????????????.attr("width", 500) ???????????????.attr("height", 50); ???// 创建圆 ???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("r", function(d) { ???????????return d; ??????});</script></body></html>
话不多说，上效果图（就是五个圆，后面的越来越大）。自己可以试试d3.js(2)-svg
原文地址：https://www.cnblogs.com/zhouwenbo/p/8241927.html