• 【HTML】制作一个简单的动态SVG图形

    目录

    前言

    开始

    HTML部分

    CSS部分

    效果图

    总结

    前言

            无需多言，本文将详细介绍一段HTML和CSS代码，该代码用于创建一个动态的SVG图形，具体内容如下：

     

    开始

            首先新建文件夹，创建两个文本文档，其中HTML的文件名改为[index.html]，CSS的文件名改为[style.css]，创建好后右键用文本文档打开，再把下面相对应代码填入后保存即可。

    HTML部分

            HTML部分的代码主要构建了一个包含动态SVG图形的网页。文档类型声明指定了HTML5，并且文档的主要语言被设置为英语。在部分，定义了字符编码为UTF-8，确保了网页可以正确显示各种字符。同时，定义了网页标题，并链接了一个外部CSS样式表来控制网页的样式。

            在部分，使用了一个SVG元素来创建图形内容。SVG定义了一个视口，并围绕中心点创建了六个不同颜色和描边样式的圆形。每个圆形都通过标签应用了一个动画，使得它们的半径从0增长到100，形成了一个连续的扩展效果。这些动画的开始时间相互错开，以创建一个连续的动态展示。

    1. html> 
    2. <html lang="en"> 
    3.  
    4. <head>
    5.   <meta charset="UTF-8"> 
    6.   <title>1title> 
    7.   <link rel="stylesheet" href="./style.css"> 
    8. head>
    9.  
    10. <body>
    11. <svg viewBox="0 0 100 100">
    12.  
    13. 	<g stroke-width="20">
    14. 		<g transform="rotate(0 50 50)">
    15. 			<circle cx="50" cy="50" r="0" stroke="#012" stroke-dasharray="0 9 6 4 5" fill="none">
    16. 				<animate attributeName="r" values="0; 100" dur="30s" begin="0s" repeatCount="indefinite" />
    17. 			circle>
    18. 		g>
    19. 		
    20. 		<g transform="rotate(60 50 50)">
    21. 			<circle cx="50" cy="50" r="0" stroke="#345" stroke-dasharray="4 8 4 6 2" fill="none">
    22. 				<animate attributeName="r" values="0; 100" dur="30s" begin="-2s" repeatCount="indefinite" />
    23. 			circle>
    24. 		g>
    25. 		
    26. 		<g transform="rotate(120 50 50)">
    27. 			<circle cx="50" cy="50" r="0" stroke="#678" stroke-dasharray="2 7 9 9 6" fill="none">
    28. 				<animate attributeName="r" values="0; 100" dur="30s" begin="-4s" repeatCount="indefinite" />
    29. 			circle>
    30. 		g>
    31. 		
    32. 		<g transform="rotate(180 50 50)">
    33. 			<circle cx="50" cy="50" r="0" stroke="#9ab" stroke-dasharray="8 8 3 7 7" fill="none">
    34. 				<animate attributeName="r" values="0; 100" dur="30s" begin="-6s" repeatCount="indefinite" />
    35. 			circle>
    36. 		g>
    37. 		
    38. 		<g transform="rotate(240 50 50)">
    39. 			<circle cx="50" cy="50" r="0" stroke="#cde" stroke-dasharray="1 5 6 7 5" fill="none">
    40. 				<animate attributeName="r" values="0; 100" dur="30s" begin="-8s" repeatCount="indefinite" />
    41. 			circle>
    42. 		g>
    43.  
    44. 	g>
    45. svg>
    46. body>
    47. html>

    CSS部分

            CSS部分的代码主要用于设置网页的背景颜色和SVG元素的样式。背景颜色被设置为淡蓝色，为网页提供了一个清爽的视觉效果。对于SVG元素，使用绝对定位将其放置在页面的中心，并通过transform属性确保了水平和垂直居中。 SVG元素的宽度和高度被设置为100%，使其充满整个页面。这样的设置使得SVG图形无论在何种屏幕尺寸下都能良好展示。

    1. /* 设置body的背景颜色为淡蓝色 */  
    2. body {  
    3. 	background: #def;  
    4. }  
    5.   
    6. /* 设置SVG元素的样式 */  
    7. svg {  
    8. 	/* 将SVG元素定位到绝对位置，使其不受其他元素位置的影响 */  
    9. 	position: absolute;  
    10. 	  
    11. 	/* 将SVG元素的顶部位置设置为页面的50% */  
    12. 	top: 50%;  
    13. 	  
    14. 	/* 将SVG元素的左部位置设置为页面的50% */  
    15. 	left: 50%;  
    16. 	  
    17. 	/* 使用transform属性将SVG元素水平和垂直居中。translate(-50%,-50%)表示向左和向上移动元素自身宽度和高度的50%，从而达到居中的效果 */  
    18. 	transform: translate(-50%,-50%);  
    19. 	  
    20. 	/* 设置SVG元素的高度为100%，即占据其包含块的全部高度 */  
    21. 	height: 100%;  
    22. 	  
    23. 	/* 设置SVG元素宽度为100%，即占据其包含块的全部宽度 */  
    24. 	width: 100%;  
    25. }

    效果图

    总结

            整体而言，这段代码展示了如何使用HTML和CSS创建一个动态的、响应式的网页图形。HTML部分负责定义网页的结构和内容，特别是SVG图形的创建和动画的设置。CSS部分则负责美化网页，设置背景颜色和图形的布局。

            通过这段代码，我们可以看到SVG的强大功能，不仅可以创建复杂的图形，还可以通过动画创造出动态的效果。同时，CSS的使用确保了图形的响应性和美观性，使得网页在不同设备和屏幕尺寸上都能提供良好的用户体验。这种技术可以广泛应用于网页设计和开发中，为用户提供更加丰富和吸引人的视觉体验。

  • 相关阅读:
    2023计算机四非保研（复试：东北大学，成电，西电，浙软，中海洋，天大）
    Spring MVC @Controller和@RequestMapping注解
    《ClickHouse原理解析与应用实践》知识梳理
    JTAG 详解
    【Swift 60秒】43 - Variadic functions
    【机器学习8】采样
    剑指offer 47：礼物的最大价值
    L1-018 大笨钟
    你的团队工作量饱和吗？
    （附源码）springboot社区文明养宠平台 毕业设计 231609
  • 原文地址：https://blog.csdn.net/qq_70814008/article/details/137296887