HTML、CSS和SVG學習實現代碼：https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9
index.html
<!DOCTYPE html>
<html><head><title>Shapes with SVG and CSS</title><link rel="stylesheet" href="./style.css">
</head><body><svg width="960" height="800"><g transform="scale(1.5)"><!--通過上面的函數放大--><circle cx="50" cy="50"r="50"></circle><rect x="100" y="25" width="50" height="50" fill="red"></rect><!--stoke 邊界顏色transform 設置g的位置lines 和 path 的區別：lines線段和線段連接的地方是斷開的path的連接是圓滑的 stroke-linejoin round設置線連接的地方是圓滑的--><g transform="translate(0,100)" fill="blue" stroke="black"><circle cx="50" cy="50"r="50" stroke-width="5"></circle><rect x="100" y="25" width="50" height="50" fill="red"></rect></g><g transform="translate(100,50)" class="lines"><line x1="100"y1="0" x2="100" y2="100"></line><path fill="none" d="M100 100 L200 100 L100 0"></path></g></g></svg>
</body></html>
index.js
body {margin: 0px;overflow: hidden;font-size: 2em;font-family: manosapce;
}.highlighted {color: red;
}.lines {stroke: black;stroke-width: 5;
}.lines path {stroke: red;stroke-linejoin: round;
}
svg通過在html里面用組件進行繪畫得到各種各樣的圖形。為了方便繪制，可以將他們放在g標簽里面，再通過設置transform屬性進行移動。
D3學習實現代碼：https://vizhub.com/Edward-Elric233/a0996081ad68437aac3bf23612f6347c
index.html
<!DOCTYPE html>
<html><head><title>Let's make a face with D3.js</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">console.log(d3); //test whether you have imported d3.js or not</script></body></html>
styles.css
body {margin: 0px;overflow: hidden;font-size: 2em;font-family: manosapce;
}.highlighted {color: red;
}.lines {stroke: black;stroke-width: 5;
}.lines path {stroke: red;stroke-linejoin: round;
}
index.js
const svg = d3.select('svg');
// svg.style('background-color', 'red'); testconst height = +svg.attr('height');
//+ equals paresFloat()
const width = +svg.attr('width');const g = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`);const circle = g.append('circle');circle.attr('r', height / 2).attr('fill', 'yellow').attr('stroke', 'black');const eyeSpacing = 100;
const eyeYOffset = -80;
const eyeRadius = 30;
const eyebrowWidth = 50;
const eyebrowHeight = 20;
const eyebrowYOffset = -60;
const mouthYOffset = -15;const eyesG = g.append('g').attr('transform', `translate(0, ${eyeYOffset})`);const leftEye = eyesG.append('circle').attr('r', eyeRadius).attr('cx', -eyeSpacing);const rightEye = eyesG.append('circle').attr('r', eyeRadius).attr('cx', eyeSpacing);const eyebrowG = eyesG.append('g').attr('transform', `translate(0, ${eyebrowYOffset})`);eyebrowG.transition().duration(2000).attr('transform', `translate(0, ${eyebrowYOffset-10})`).transition().duration(1000).attr('transform', `translate(0, ${eyebrowYOffset})`);const leftEyebrow = eyebrowG.append('rect').attr('width', eyebrowWidth).attr('height', eyebrowHeight).attr('x', -eyeSpacing - eyebrowWidth / 2);const rightEyebrow = eyebrowG.append('rect').attr('width', eyebrowWidth).attr('height', eyebrowHeight).attr('x', eyeSpacing - eyebrowWidth / 2);const mouth = g.append('path').attr('d', d3.arc()({innerRadius: 100,outerRadius: 120,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2})).attr('transform', `translate(0, 50)`).transition().duration(2000).attr('d', d3.arc()({innerRadius: 120,outerRadius: 140,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2})).transition().duration(1000).attr('d', d3.arc()({innerRadius: 100,outerRadius: 120,startAngle: Math.PI / 2,endAngle: Math.PI * 3 / 2}));
使用d3其實是通過d3的函數繪制svg圖形，不過因為d3提供了方便的接口，使得繪制更加方便。
想要繪制什么圖形可以到D3官網查詢API。
而且d3繪制的圖形通過使用transition函數還能變形。以上面的笑臉為例可以讓笑臉進行變化 。雖然程度有限。
