【HTML5】svg 绘制图形
在HTML5中，使用SVG绘制图形可以通过直接在HTML文件中嵌入SVG代码或者动态生成SVG图形来实现。以下是一个简单的例子，演示了如何使用SVG绘制一个简单的矩形。
<!DOCTYPE html>
<html>
<body>
<h2>SVG 矩形</h2>
<!-- 直接嵌入SVG代码 -->
<svg width="100" height="100">
<rect width="100" height="100" style="fill:blue;stroke-width:3;stroke:black" />
</svg>
<script>
// 或者使用JavaScript动态创建SVG
var svgNS = "http://www.w3.org/2000/svg";
var rect = document.createElementNS(svgNS, "rect");
rect.setAttribute('x', 0);
rect.setAttribute('y', 0);
rect.setAttribute('width', 100);
rect.setAttribute('height', 100);
rect.setAttribute('fill', 'red');
rect.setAttribute('stroke-width', 3);
rect.setAttribute('stroke', 'black');
var svg = document.createElementNS(svgNS, "svg");
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');
svg.appendChild(rect);
document.body.appendChild(svg);
</script>
</body>
</html>在这个例子中，首先我们通过直接嵌入SVG代码创建了一个蓝色填充、黑色边框的矩形。接着，我们使用JavaScript动态创建了一个红色填充、黑色边框、边框宽度为3的矩形，并将其添加到页面的body中。这两种方法都可以用来在HTML5页面中绘制SVG图形。
评论已关闭