当前位置：首页 > article >正文

【日常记录-JS】HTML5中使用SVG元素

article 2024/9/25 17:14:55

Author：赵志乾
Date：2024-08-28
Declaration：All Right Reserved！！！

1. 简介

在HTML5中使用SVG元素主要涉及到将SVG代码直接嵌入HTML文档，或者通过HTML元素（如<img>、<object>、<iframe>）来引用外部SVG文件。然而，直接嵌入SVG代码通常提供了更大的灵活性和控制力，因为它允许直接在HTML中定义SVG图形的形状、大小、颜色等属性，并且可以使用CSS和JavaScript来进一步样式化和交互。

2. HTML5直接嵌入SVG代码

2.1 创建SVG容器

在HTML文档中创建一个<svg>元素作为SVG图形的容器。

<svg width="100" height="100">  
  <!-- SVG图形内容将放在这里 -->  
</svg>

2.2 添加SVG图形元素

<svg width="100" height="100">  
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />  
</svg>

其中，<circle>元素定义了一个圆形，cx和cy属性指定了圆心的坐标，r属性指定了圆的半径，stroke和stroke-width属性定义圆的边框颜色和宽度，而fill属性则定义了圆的填充颜色。

2.3 使用CSS样式化SVG

可以像其他HTML元素一样，使用CSS来样式化SVG元素。可以直接在SVG元素上使用style属性或者通过class和外部CSS文件来应用样式。

<svg width="100" height="100" style="border:1px solid black;">  
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" class="my-circle" />  
</svg>  
  
<style>  
  .my-circle {  
    /* CSS样式 */  
    transition: fill 0.5s;  
  }  
  
  .my-circle:hover {  
    fill: red;  
  }  
</style>

2.4 使用JavaScript与SVG交互

由于SVG是DOM（文档对象模型）的一部分，故可以使用JavaScript来动态修改SVG图形的属性、添加事件监听器等。

<svg width="100" height="100" id="mySvg">  
  <circle cx="50" cy="50" r="40" id="myCircle" stroke="green" stroke-width="4" fill="yellow" />  
</svg>  
  
<script>  
  document.getElementById('myCircle').addEventListener('click', function() {  
    this.setAttribute('fill', 'blue');  
  });  
</script>

该例子中，当用户点击圆形时，圆的填充颜色会变成蓝色。