手动编写SVG

Web前端评论17阅读模式

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

手动编写SVG

  1. 创建SVG容器:所有的SVG图形都包含在一个<svg>元素内,这个元素定义了图像的尺寸和视图框。
  2. 添加图形元素:你可以添加如矩形<rect>、圆形<circle>、线条<line>、多边形<polygon>等基本形状元素。
  3. 设置样式和属性:通过元素的属性来设置样式,比如fill定义填充颜色,stroke定义边框颜色等。
  4. 使用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包含以下部分:

  • widthheight 属性定义了SVG图像的宽度和高度。
  • xmlns 定义了XML命名空间,它是SVG标签的URL。
  • <rect> 元素定义了一个矩形,其中xy属性定义了矩形左上角的位置,widthheight定义了矩形的尺寸,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图形。

 

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

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证