如何绘制具有不同颜色的两个半圆形的Svg并对其应用动画

要绘制具有不同颜色的两个半圆形的SVG并对其应用动画，可以按照以下步骤进行：

1. 创建SVG元素：使用HTML的<svg>标签创建SVG元素，并设置宽度和高度。

<svg width="200" height="200">
  <!-- SVG内容将在这里添加 -->
</svg>

1. 绘制半圆形：使用SVG的<path>标签绘制半圆形。可以使用<path>的d属性来定义路径。

<svg width="200" height="200">
  <path d="M100,100 A50,50 0 0,1 150,100" fill="red" />
  <path d="M100,100 A50,50 0 0,0 50,100" fill="blue" />
</svg>

上述代码中，第一个<path>元素绘制了一个红色的半圆形，第二个<path>元素绘制了一个蓝色的半圆形。d属性中的参数用于定义路径，具体可以参考SVG路径命令。

1. 应用动画：可以使用CSS的@keyframes和animation属性来为SVG元素应用动画效果。

<svg width="200" height="200">
  <path d="M100,100 A50,50 0 0,1 150,100" fill="red" style="animation: rotate 2s linear infinite" />
  <path d="M100,100 A50,50 0 0,0 50,100" fill="blue" style="animation: rotate 2s linear infinite reverse" />
</svg>

<style>
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

上述代码中，通过为每个<path>元素添加style属性，设置animation属性来应用旋转动画效果。@keyframes定义了动画的关键帧，从0%到100%设置了旋转角度，transform属性用于实现旋转效果。

这样，就可以绘制具有不同颜色的两个半圆形的SVG并对其应用动画了。

注意：以上代码仅为示例，实际应用中可以根据需求进行调整和优化。

参考链接：

• SVG教程：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
• CSS动画教程：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations