HTML5 SVG 随机圆形绘制：字母、三角形和五角星
以下是使用 HTML5 的 SVG 功能绘制所描述的圆形的代码。请注意，由于文本和形状的位置、方向、颜色和字体样式要求是随机的，因此每次运行代码将得到不同的结果。
<!DOCTYPE html>
<html>
<body>
<!-- 画布1 -->
<svg width='200px' height='200px'>
<circle cx='100' cy='100' r='100' fill='#ffffff' stroke='#000000' />
<!-- 字母 -->
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(45)'>Z</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-30)'>J</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(15)'>J</text>
<!-- 正三角形 -->
<polygon points='70,20 130,20 100,130' fill='#ff0000' />
<polygon points='40,80 160,80 100,190' fill='#00ff00' />
<!-- 五角星 -->
<polygon points='70,70 100,30 130,70 120,100 80,100' fill='#0000ff' />
<polygon points='50,120 80,100 50,80 90,80 120,100' fill='#ffff00' />
</svg>
<!-- 画布2 -->
<svg width='200px' height='200px'>
<circle cx='100' cy='100' r='100' fill='#ffffff' stroke='#000000' />
<!-- 字母 -->
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(30)'>J</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-45)'>Z</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-60)'>J</text>
<!-- 正三角形 -->
<polygon points='70,20 130,20 100,130' fill='#00ff00' />
<polygon points='40,80 160,80 100,190' fill='#ff0000' />
<!-- 五角星 -->
<polygon points='70,70 100,30 130,70 120,100 80,100' fill='#ffff00' />
<polygon points='50,120 80,100 50,80 90,80 120,100' fill='#0000ff' />
</svg>
<!-- 画布3 -->
<svg width='200px' height='200px'>
<circle cx='100' cy='100' r='100' fill='#ffffff' stroke='#000000' />
<!-- 字母 -->
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(0)'>J</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(90)'>Z</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-90)'>J</text>
<!-- 正三角形 -->
<polygon points='70,20 130,20 100,130' fill='#ffff00' />
<polygon points='40,80 160,80 100,190' fill='#0000ff' />
<!-- 五角星 -->
<polygon points='70,70 100,30 130,70 120,100 80,100' fill='#ff0000' />
<polygon points='50,120 80,100 50,80 90,80 120,100' fill='#00ff00' />
</svg>
<!-- 画布4 -->
<svg width='200px' height='200px'>
<circle cx='100' cy='100' r='100' fill='#ffffff' stroke='#000000' />
<!-- 字母 -->
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-30)'>Z</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(45)'>J</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(60)'>J</text>
<!-- 正三角形 -->
<polygon points='70,20 130,20 100,130' fill='#0000ff' />
<polygon points='40,80 160,80 100,190' fill='#ffff00' />
<!-- 五角星 -->
<polygon points='70,70 100,30 130,70 120,100 80,100' fill='#00ff00' />
<polygon points='50,120 80,100 50,80 90,80 120,100' fill='#ff0000' />
</svg>
<!-- 画布5 -->
<svg width='200px' height='200px'>
<circle cx='100' cy='100' r='100' fill='#ffffff' stroke='#000000' />
<!-- 字母 -->
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(60)'>Z</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-60)'>J</text>
<text x='100' y='100' font-size='80' fill='#000000' transform='rotate(-30)'>J</text>
<!-- 正三角形 -->
<polygon points='70,20 130,20 100,130' fill='#ff0000' />
<polygon points='40,80 160,80 100,190' fill='#00ff00' />
<!-- 五角星 -->
<polygon points='70,70 100,30 130,70 120,100 80,100' fill='#0000ff' />
<polygon points='50,120 80,100 50,80 90,80 120,100' fill='#ffff00' />
</svg>
</body>
</html>
以上代码将在5个 SVG 画布上绘制5个满足设定要求的圆形。请将此代码保存为 .html 文件并在浏览器中打开，即可看到绘制的结果。每次刷新页面都将得到不同的随机结果。
原文地址: https://www.cveoy.top/t/topic/Tv5 著作权归作者所有。请勿转载和采集!