手动编写SVG

2024年5月16日11:40:23Web前端评论69阅读模式

SVG（可缩放矢量图形）是一种基于XML的图像格式，用于描述二维图形，它是一种矢量图形格式，图像可以无限放大而不失真。可以通过文本编辑器手动编写SVG，下面是一个简单的SVG文件示例，以及如何手动编写SVG：

创建SVG容器：所有的SVG图形都包含在一个<svg>元素内，这个元素定义了图像的尺寸和视图框。
添加图形元素：你可以添加如矩形<rect>、圆形<circle>、线条<line>、多边形<polygon>等基本形状元素。
设置样式和属性：通过元素的属性来设置样式，比如fill定义填充颜色，stroke定义边框颜色等。
使用XML语法：确保你的SVG代码遵循XML的语法规则，比如正确闭合元素，使用小写标签等。

下面是一个简单的SVG文件示例，它创建了一个简单的蓝色矩形：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="blue" stroke-width="2"/>
</svg>

这个SVG包含以下部分：

width 和 height 属性定义了SVG图像的宽度和高度。
xmlns 定义了XML命名空间，它是SVG标签的URL。
<rect> 元素定义了一个矩形，其中x和y属性定义了矩形左上角的位置，width和height定义了矩形的尺寸，stroke定义了矩形的边框颜色，fill定义了矩形的填充颜色，stroke-width定义了边框的宽度。

你可以将上述代码保存为.svg文件，并在网页浏览器或任何支持SVG图像的图像查看器中打开它。

要创建更复杂的SVG图像，你可能需要学习更多的SVG元素和属性，如路径<path>、组<g>、样式<style>等，以及如何使用CSS和JavaScript与SVG交互。

下面是更详细的的例子：

创建SVG容器

所有的SVG图形都包含在一个<svg>元素内。这个元素定义了图像的尺寸和视图框。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG内容将在这里 -->
</svg>

添加基本形状

SVG支持多种基本形状，如矩形<rect>、圆形<circle>、椭圆<ellipse>、线条<line>、折线<polyline>和多边形<polygon>。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill="blue" stroke="black" stroke-width="2"/>
  <circle cx="100" cy="50" r="20" fill="green" stroke="black" stroke-width="2"/>
  <ellipse cx="100" cy="120" rx="30" ry="15" fill="red" stroke="black" stroke-width="2"/>
  <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2"/>
  <polyline points="60,160 100,120 140,160" fill="none" stroke="black" stroke-width="2"/>
  <polygon points="60,60 100,90 140,60 140,110 100,130 60,110" fill="purple" stroke="black" stroke-width="2"/>
</svg>

使用路径

路径<path>是SVG中最强大的形状元素，它可以创建复杂的线条和形状。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 50 50 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

d属性中的命令：

M：移动到起点（Move To）
L：画线到（Line To）
H：水平线到（Horizontal Line To）
V：垂直线到（Vertical Line To）
Z：闭合路径（Close Path）

使用文本

SVG还支持在图形中嵌入文本。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50" font-family="Verdana" font-size="20" fill="blue">Hello SVG!</text>
</svg>

使用样式

你可以使用style属性为元素应用内联样式，或者使用<style>元素定义CSS样式。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .rect-style {
      fill: orange;
      stroke: black;
      stroke-width: 2;
    }
  </style>
  <rect class="rect-style" x="10" y="10" width="30" height="30"/>
</svg>

使用变换

变换允许你移动、旋转、缩放和倾斜图形。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill="blue" transform="translate(50, 50) rotate(45)"/>
</svg>

组合元素

使用<g>元素可以组合多个元素，这样你可以一次性变换它们。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50, 50)">
    <rect x="10" y="10" width="30" height="30" fill="blue"/>
    <circle cx="50" cy="50" r="15" fill="green"/>
  </g>
</svg>

交互性

使用SVG的<script>元素和SVG DOM API，你可以添加交互性。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="myRect" x="10" y="10" width="30" height="30" fill="blue"/>
  <script type="text/javascript">
    // JavaScript代码
    var rect = document.getElementById('myRect');
    rect.addEventListener('click', function() {
      this.setAttribute('fill', 'red');
    });
  </script>
</svg>

动画

SVG支持动画，可以通过SMIL（Synchronized Multimedia Integration Language）或者CSS动画来实现。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill="blue">
    <animate attributeName="x" from="10" to="100" dur="2s" repeatCount="indefinite"/>
  </rect>
</svg>

使用外部文件

你可以将SVG代码保存在独立的.svg文件中，并在HTML页面中引用它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Example</title>
</head>
<body>
  <img src="example.svg" alt="SVG Example" />
</body>
</html>

或者直接在HTML中嵌入SVG：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Example</title>
</head>
<body>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG内容 -->
  </svg>
</body>
</html>

SVG是一个非常强大和灵活的图形格式，可以通过多种方式来创建和操作图形，比如用矢量编辑软件绘制并导出SVG图形。

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！