svg 使用学习

最新推荐文章于 2024-07-02 21:57:24 发布

binbin_xixi

最新推荐文章于 2024-07-02 21:57:24 发布

阅读量194

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_34958474/article/details/104658767

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

svg 使用学习

svg基础

矩形（rect）

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性, style 中的属性也可以单独写在外边
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
rx 和 ry 属性可使矩形产生圆角。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="30" rx="20" ry="30" width="300" height="100" style="fill:blue;stroke-width:1;stroke:yellow"/>
</svg>

2，圆（circle）

cx, cy 为圆心位置
r 为半径

<circle cx="100" cy="100" r="40" storke="pink" stroke-width="2" fill="red"/>

3，椭圆（ellipse）

cx,cy 为圆心位置
rx,ry 为x,y 方向的半径

<ellipse cx="100" cy="100" rx="40" ry="80" storke="pink" stroke-width="2" fill="red"/>

4，线（line）

x1,y1 起点地址
x2,y2 终点地址

<line x1="0" y1="0" x2="100" y2="30" style="stroke:blue;stroke-width:2"/>

5，多边形（polygon）

points 表示各个点的坐标

<polygon points="10,50 50,10 90,50 50,90" stroke="blue" stroke-width="2" fill="#ccc"/>

6，折线（polyline）

与多边形类似，不闭合

<polyline points="10,50 50,10 90,50 50,90" stroke="blue" stroke-width="2" fill="#ccc"/>

7，path (路径)

path 除了可绘制上边的基本图形，主要来绘制较为复杂的图形

M = moveto 画笔起点
L = lineto 直线绘制的坐标
H = horizontal lineto 平行线
V = vertical lineto 竖直线
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc 圆弧
Z = closepath 是否闭合

<path d="M10 10 H 200 L230 30 L200 50 L10 50 H 10 Z" fill="#fff" stroke="black"/>

<path d="M10 10 H 200 L230 30 L200 50 L10 50 L30 30 Z" fill="#fff" stroke="black"/>

svg进阶

1，viewBox

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     width="150" height="100" viewBox="0 0 3 1">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

2，svg 在 html 中使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>
<body>
  <svg width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>
</body>
</html>