07(SVG)文本

七色的天空

已于 2023-12-30 12:49:44 修改

阅读量398

点赞数 7

分类专栏： 08_新H5 文章标签： javascript 开发语言 ecmascript

于 2023-12-30 12:15:58 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/135303467

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文本</title>
</head>
<body>
	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
		<text x="0" y="15" fill="red">I Hate SVG</text>
	</svg>
</body>
</html>

上述运行结果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文本</title>
</head>
<body>
	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
		<text x="0" y="15" fill="red" transform="rotate(30 0,60)">I Hate SVG</text>
	</svg>
</body>
</html>

上述运行结果：

SVG中的<text>元素可以使用transform属性来进行变换操作，包括平移、缩放、旋转和倾斜等。transform属性可以接受一系列的变换函数作为参数。

以下是一些常用的变换函数：

translate(x,y)：将文本在x和y方向上平移指定的距离。
scale(sx,sy)：将文本在x和y方向上按比例进行缩放。
rotate(angle[angle,cx,cy])：以(cx, cy)为中心，将文本按逆时针方向旋转指定的角度。
skewX(angle)：在x方向上将文本进行倾斜变换。
skewY(angle)：在y方向上将文本进行倾斜变换。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文本</title>
</head>
<body>

	<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
	xmlns:xlink="http://www.w3.org/1999/xlink">
	    <defs>
		    <!-- 被引用元素的容器 -->
		    <path id="path11" d="M75,20 a1,1 0 0,0 100,0" />
	    </defs>
	    <text x="10" y="100" style="fill:red;">
		    <!-- textpath 让文本在指定的路径上排列 
			xlink:href="引用克隆元素",注意引用id需要加 #
		    -->
		    <textPath xlink:href="#path11">I love SVG I love SVG</textPath>
	    </text>
    </svg>
</body>
</html>

上述运行结果：

使用svg创建一个椭圆弧段

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>文本</title>
  </head>
  <body>
    <svg width="200" height="200" style="background-color: pink;">
        <path d="M50,100 A1,1 0 0,0 50,20" fill="none" stroke="black" />
    </svg>
  </body>
</html>

上述运行结果：

在 SVG 中，a 和 A 是用于创建椭圆弧段的两个路径命令。它们的区别在于参数的表示格式和坐标系。

"a" 命令是相对坐标表示，而 "A" 命令是绝对坐标表示。
"a" 命令使用相对于当前点的坐标值，即相对于前一个点的位置。
"A" 命令使用绝对坐标值，即相对于整个 SVG 绘图区域的位置。

下面是具体的使用方式和参数解释：

a(rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, dx, dy)

rx 和 ry 分别表示椭圆的水平半径和垂直半径。
x-axis-rotation 表示椭圆相对于 x 轴的旋转角度。
large-arc-flag 为 0 或 1，表示是否画大弧。0 表示小弧，1 表示大弧。
sweep-flag 为 0 或 1，表示弧段的方向。0 表示逆时针，1 表示顺时针。
dx 和 dy 分别表示椭圆弧端点的偏移量。

A(rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)

rx 和 ry 分别表示椭圆的水平半径和垂直半径。
x-axis-rotation 表示椭圆相对于 x 轴的旋转角度。
large-arc-flag 为 0 或 1，表示是否画大弧。0 表示小弧，1 表示大弧。
sweep-flag 为 0 或 1，表示弧段的方向。0 表示逆时针，1 表示顺时针。
x 和 y 分别表示椭圆弧端点的绝对坐标。

因此，区别在于 a 命令使用相对坐标，而 A 命令使用绝对坐标。如果你想要相对于当前位置绘制椭圆弧段，可以使用 "a" 命令；如果你想要指定绝对位置来绘制椭圆弧段，可以使用 "A" 命令。