SVG 代码的主要规则及示例代码

最新推荐文章于 2025-03-12 00:04:34 发布

太阳

最新推荐文章于 2025-03-12 00:04:34 发布

阅读量1.3k

点赞数 32

文章标签： svg

本文链接：https://blog.csdn.net/weixin_45379279/article/details/145191138

版权

一、基本结构
SVG 代码通常包含在 <svg> 元素中，该元素定义了一个 SVG 图像的容器。

<svg width="100" height="100">
  <!-- 这里放置具体的图形元素 -->
</svg>

在这个示例中：

<svg> 是根元素，它开始了 SVG 图像的定义。
width 和 height 属性定义了 SVG 图像的宽度和高度，单位可以是像素或其他长度单位。

二、图形元素
SVG 包含多种图形元素，例如：

矩形（<rect>）：

<rect x="10" y="10" width="80" height="80" fill="red"/>

x 和 y 定义了矩形左上角的坐标。
width 和 height 定义了矩形的尺寸。
fill 定义了矩形的填充颜色。

圆形（<circle>）：

<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="none"/>

cx 和 cy 是圆心的坐标。
r 是圆的半径。
stroke 定义了边框的颜色。
stroke-width 定义了边框的宽度。
fill 可以设置填充颜色，如果设置为 none，则表示不填充。

线条（<line>）：

<line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2"/>

x1 和 y1 是线条起点的坐标。
x2 和 y2 是线条终点的坐标。
stroke 是线条的颜色。
stroke-width 是线条的宽度。

三、路径（<path>）：
<path> 元素是 SVG 中最强大的元素，可用来绘制复杂的形状。

<path d="M10 10 L90 90 L10 90 Z" fill="yellow"/>

d 属性包含一系列的绘图命令，包括：
- M 表示移动到指定点，如 M10 10 是将绘图点移动到坐标 (10, 10)。
- L 表示从当前点绘制直线到指定点，如 L90 90 是从当前点画直线到 (90, 90)。
- Z 表示闭合路径，将路径的起点和终点连接起来。

四、文本（<text>）：
可以在 SVG 中添加文本元素。

<text x="50" y="50" font-size="20" text-anchor="middle" fill="black">Hello SVG</text>

x 和 y 是文本元素的起始位置。
font-size 定义字体大小。
text-anchor 定义文本的对齐方式，如 middle 表示水平居中对齐。
fill 定义文本的颜色。

五、变换（<transform>）：
可以使用 <transform> 元素或属性对图形元素进行变换操作，如平移、旋转、缩放和倾斜。

<rect x="10" y="10" width="80" height="80" fill="red">
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="5s" repeatCount="indefinite"/>
</rect>

这里使用了 <animateTransform> 元素对矩形进行动画旋转。
attributeName="transform" 表示要对 transform 属性进行动画。
attributeType="XML" 表示该属性是 XML 属性。
type="rotate" 表示旋转操作。
from 和 to 定义了旋转的起始和结束状态，from="0 50 50" 表示从中心 (50, 50) 开始旋转 0 度，to="360 50 50" 表示旋转到 360 度。
dur="5s" 表示动画持续时间为 5 秒。
repeatCount="indefinite" 表示无限重复。

六、组（<g>）：
<g> 元素用于将多个元素组合在一起，方便进行统一操作。

<g fill="purple">
  <rect x="10" y="10" width="30" height="30"/>
  <circle cx="50" cy="50" r="20"/>
</g>

这里的 <g> 元素将一个矩形和一个圆形组合在一起，并设置它们的填充颜色为紫色。

七、渐变和图案：
SVG 支持线性渐变和径向渐变。

线性渐变（<linearGradient>）：

<defs>
  <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:red;stop-opacity:1"/>
    <stop offset="100%" style="stop-color:yellow;stop-opacity:1"/>
  </linearGradient>
</defs>
<rect x="10" y="10" width="80" height="80" fill="url(#myGradient)"/>

<defs> 元素用于定义可复用的元素，如渐变。
<linearGradient> 元素定义了一个线性渐变，id 用于引用。
<stop> 元素定义了渐变的颜色停止点，offset 表示位置，style 包含颜色和透明度信息。
fill="url(#myGradient)" 表示使用 id 为 myGradient 的渐变来填充矩形。

径向渐变（<radialGradient>）：

<defs>
  <radialGradient id="myRadialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:blue;stop-opacity:1"/>
    <stop offset="100%" style="stop-color:green;stop-opacity:1"/>
  </radialGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#myRadialGradient)"/>

<radialGradient> 元素定义了一个径向渐变，cx, cy, r, fx, fy 定义了渐变的位置和半径。

八、SVG 元素的属性：
SVG 元素可以具有多个属性，这些属性可以控制元素的外观和行为，如 opacity 控制透明度，fill-rule 控制填充规则（如 evenodd 或 nonzero）等。

<path d="M10 10 L90 10 L50 90 Z" fill="orange" fill-rule="evenodd" opacity="0.5"/>

fill-rule="evenodd" 表示使用偶数奇数规则进行填充。
opacity="0.5" 表示元素的透明度为 0.5。

SVG 代码通过使用这些元素和属性，可以创建各种复杂的二维图形和动画，为网页提供丰富的图形表现能力。通过组合不同的图形元素、使用变换和渐变等，可以实现各种各样的视觉效果，并且可以与 JavaScript 等脚本语言结合，实现交互功能。