您现在的位置是：首页 > 技术教程正文

PHP生成SVG

admin 阅读： 2024-03-16

后台-插件-广告管理-内容页头部广告（手机）

SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言。它可以用来创建图形和动画，适用于Web开发和图形设计等领域。
使用PHP操作DOM可以很方便的生成SVG。
以下是一个简单使用PHP绘制一个红色圆圈的SVG示例：

// 创建一个新的XML文档 $dom = new DOMDocument('1.0', 'UTF-8'); // 创建 $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); // 设置宽高 $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $circle = $dom->createElement('circle'); // 圆心坐标 $circle->setAttribute('cx', 100); $circle->setAttribute('cy', 100); // 半径 $circle->setAttribute('r', 50); // 填充色 $circle->setAttribute('fill', 'red'); // 将元素添加到 $svg->appendChild($circle); // 将 $dom->appendChild($svg); // 设置HTTP头来指定内容类型为SVG header('Content-type: image/svg+xml'); // 输出SVG内容 echo $dom->saveXML(); // 或者保存为.svg文件 $dom->save('redCircle.svg');

完整XML如下：

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red"/> svg>

预定义的形状元素

SVG中有一些预定义的形状元素，可被开发者使用和操作：

圆形
矩形
椭圆
线
折线
多边形

下面一一举例说明。

圆形

元素用于在 SVG 画布上绘制圆圈或圆。下面是一些元素的常用属性。

属性说明

cx (x轴坐标)：圆心的 x 坐标。
cy (y轴坐标)：圆心的 y 坐标。
r (半径)：圆的半径。
fill (填充颜色)：指定圆的填充颜色。可以是颜色名称、十六进制值或者 RGB 值。
fill-opacity (填充透明度)：指定圆的填充透明度，范围0~1。
stroke (边框颜色)：指定圆的边框颜色。
stroke-width (边框宽度)：指定圆的边框宽度。
stroke-opacity (边框透明度)：指定圆的边框透明度，范围0~1。
opacity (透明度)：指定圆的透明度，范围0~1。

代码

$dom = new DOMDocument('1.0', 'UTF-8'); $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $circle = $dom->createElement('circle'); $circle->setAttribute('cx', 100); $circle->setAttribute('cy', 100); $circle->setAttribute('r', 50); $circle->setAttribute('fill', 'red'); $circle->setAttribute('fill-opacity', 0.1); $circle->setAttribute('stroke', 'blue'); $circle->setAttribute('stroke-width', 5); $circle->setAttribute('stroke-opacity', 0.5); $circle->setAttribute('opacity', 0.5); // 将元素添加到 $svg->appendChild($circle); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="100" cy="100" r="50" fill="red" fill-opacity="0.9" stroke="blue" stroke-width="5" stroke-opacity="0.5" opacity="0.7"/> svg>

矩形

元素用于在 SVG 画布上绘制矩形。以下是一些元素的常用属性：

属性说明

x (x轴坐标)：矩形左上角的 x 坐标。
y (y轴坐标)：矩形左上角的 y 坐标。
width (宽度)：矩形的宽度。
height (高度)：矩形的高度。
rx (水平圆角半径)：矩形的水平方向上的圆角半径。如果没有指定，则默认为0。
ry (垂直圆角半径)：矩形的垂直方向上的圆角半径。如果没有指定，则默认为0。
fill (填充颜色)：指定矩形的填充颜色。可以是颜色名称、十六进制值或者 RGB 值。
stroke (边框颜色)：指定矩形的边框颜色。
stroke-width (边框宽度)：指定矩形的边框宽度。
stroke-opacity (边框透明度)：指定矩形的边框透明度，范围0~1。
opacity (透明度)：指定矩形的透明度。
fill-opacity (填充透明度)：指定矩形的填充透明度，范围0~1。

代码

$dom = new DOMDocument('1.0', 'UTF-8'); $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $rect = $dom->createElement('rect'); $rect->setAttribute('x', '50'); $rect->setAttribute('y', '50'); $rect->setAttribute('width', '100'); $rect->setAttribute('height', '100'); $rect->setAttribute('fill', 'blue'); // 将元素添加到 $svg->appendChild($rect); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="blue"/> svg>

椭圆

元素用于在 SVG 画布上绘制椭圆。以下是一些元素的常用属性：

属性说明

cx (中心点的 x 轴坐标)：椭圆的中心点在 x 轴上的坐标。
cy (中心点的 y 轴坐标)：椭圆的中心点在 y 轴上的坐标。
rx (水平半径)：椭圆的水平半径。
ry (垂直半径)：椭圆的垂直半径。
fill (填充颜色)：指定椭圆的填充颜色。可以是颜色名称、十六进制值或者 RGB 值。
stroke (边框颜色)：指定椭圆的边框颜色。
stroke-width (边框宽度)：指定椭圆的边框宽度。
stroke-opacity (边框透明度)：指定椭圆的边框透明度，范围0~1。
opacity (透明度)：指定椭圆的透明度，范围0~1。
fill-opacity (填充透明度)：指定椭圆的填充透明度，范围0~1。

代码

$dom = new DOMDocument('1.0', 'UTF-8'); $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $ellipse = $dom->createElement('ellipse'); $ellipse->setAttribute('cx', '100'); $ellipse->setAttribute('cy', '100'); $ellipse->setAttribute('rx', '80'); // 水平半径 $ellipse->setAttribute('ry', '50'); // 垂直半径 $ellipse->setAttribute('fill', 'yellow'); // 填充颜色 // 将元素添加到 $svg->appendChild($ellipse); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <ellipse cx="100" cy="100" rx="80" ry="50" fill="yellow"/> svg>

线

元素用于在 SVG 画布上绘制直线。以下是一些元素的常用属性：

属性说明

x1 (起始点 x 轴坐标)：直线起始点在 x 轴上的坐标。
y1 (起始点 y 轴坐标)：直线起始点在 y 轴上的坐标。
x2 (结束点 x 轴坐标)：直线结束点在 x 轴上的坐标。
y2 (结束点 y 轴坐标)：直线结束点在 y 轴上的坐标。
stroke (边框颜色)：指定直线的边框颜色。
stroke-width (边框宽度)：指定直线的边框宽度。
stroke-opacity (边框透明度)：指定直线的边框透明度。
opacity (透明度)：指定直线的透明度。
stroke-dasharray (虚线样式)：指定虚线的样式，例如 “5,3” 表示5个单位的实线跟随3个单位的空白，依此类推。
stroke-linecap (线段末端样式)：指定线段末端的样式，可以是 “butt”（平直末端）、“round”（圆形末端）或 “square”（方形末端）。
stroke-linejoin (线段连接样式)：指定线段连接处的样式，可以是 “miter”（尖角连接）、“round”（圆角连接）或 “bevel”（斜角连接）。
stroke-miterlimit (尖角限制)：指定尖角连接的限制值，当尖角连接长度超过此值时，将使用斜角连接。

代码

$dom = new DOMDocument('1.0', 'UTF-8'); $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $line = $dom->createElement('line'); $line->setAttribute('x1', '50'); $line->setAttribute('y1', '50'); $line->setAttribute('x2', '150'); $line->setAttribute('y2', '150'); $line->setAttribute('stroke', 'black'); // 边框颜色 $line->setAttribute('stroke-width', '2'); // 边框宽度 // 将元素添加到 $svg->appendChild($line); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2"/> svg>

折线

元素用于在 SVG 画布上绘制一条折线，即连接多个点并且不闭合的路径。以下是一些元素的常用属性：

属性说明

points (点列表)：指定折线上的点列表。点列表是一个由坐标对组成的序列，每个坐标对由一个x坐标和一个y坐标组成，两个坐标之间用逗号或空格分隔。例如，“0,0 10,10 20,20” 表示三个点，分别位于 (0,0)，(10,10) 和 (20,20)。
stroke (边框颜色)：指定折线的边框颜色。
stroke-width (边框宽度)：指定折线的边框宽度。
stroke-opacity (边框透明度)：指定折线的边框透明度。
fill (填充颜色)：指定折线的填充颜色。填充颜色会沿着折线的路径填充。
fill-opacity (填充透明度)：指定折线的填充透明度。
opacity (透明度)：指定折线的透明度。
stroke-linecap (线段末端样式)：指定线段末端的样式，可以是 “butt”（平直末端）、“round”（圆形末端）或 “square”（方形末端）。
stroke-linejoin (线段连接样式)：指定线段连接处的样式，可以是 “miter”（尖角连接）、“round”（圆角连接）或 “bevel”（斜角连接）。
stroke-miterlimit (尖角限制)：指定尖角连接的限制值，当尖角连接长度超过此值时，将使用斜角连接。

代码

$dom = new DOMDocument('1.0', 'utf-8'); // 创建 $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $polyline = $dom->createElement('polyline'); $polyline->setAttribute('points', '50,50 150,50 150,150 50,150'); // 点列表 $polyline->setAttribute('stroke', 'black'); // 边框颜色 $polyline->setAttribute('stroke-width', '2'); // 边框宽度 $polyline->setAttribute('fill', 'none'); // 不填充 // 将元素添加到 $svg->appendChild($polyline); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <polyline points="50,50 150,50 150,150 50,150" stroke="black" stroke-width="2" fill="none"/> svg>

多边形

元素用于在 SVG 画布上绘制一个多边形。以下是元素的常用属性：

属性说明

points (点列表)：指定多边形的点列表。点列表是一个由坐标对组成的序列，每个坐标对由一个x坐标和一个y坐标组成，两个坐标之间用逗号或空格分隔。例如，“0,0 10,10 20,20” 表示三个点，分别位于 (0,0)，(10,10) 和 (20,20)。这些点按照顺时针或逆时针顺序连接以形成多边形的边界。
fill (填充颜色)：指定多边形的填充颜色。可以是颜色名称、十六进制值或者 RGB 值。
stroke (边框颜色)：指定多边形的边框颜色。
stroke-width (边框宽度)：指定多边形的边框宽度。
stroke-opacity (边框透明度)：指定多边形的边框透明度。
opacity (透明度)：指定多边形的透明度。
fill-opacity (填充透明度)：指定多边形的填充透明度。
stroke-linecap (线段末端样式)：指定线段末端的样式，可以是 “butt”（平直末端）、“round”（圆形末端）或 “square”（方形末端）。
stroke-linejoin (线段连接样式)：指定线段连接处的样式，可以是 “miter”（尖角连接）、“round”（圆角连接）或 “bevel”（斜角连接）。
stroke-miterlimit (尖角限制)：指定尖角连接的限制值，当尖角连接长度超过此值时，将使用斜角连接。

代码

$dom = new DOMDocument('1.0', 'utf-8'); // 创建 $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('xmlns', 'http://www.w3.org/2000/svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $polygon = $dom->createElement('polygon'); $polygon->setAttribute('points', '100,20 150,90 100,160 50,90'); // 点列表 $polygon->setAttribute('fill', 'yellow'); // 填充颜色 $polygon->setAttribute('stroke', 'black'); // 边框颜色 $polygon->setAttribute('stroke-width', '2'); // 边框宽度 // 将元素添加到 $svg->appendChild($polygon); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <polygon points="100,20 150,90 100,160 50,90" fill="yellow" stroke="black" stroke-width="2"/> svg>

其他元素

文本

元素用于在 SVG 画布上添加文本。以下是一些元素的常用属性：

属性说明

x (x轴坐标)：文本左上角的 x 坐标。
y (y轴坐标)：文本左上角的 y 坐标。
fill (填充颜色)：指定文本的填充颜色。可以是颜色名称、十六进制值或者 RGB 值。
font-family (字体样式)：指定文本的字体样式。常见的字体包括 Arial、Verdana、Helvetica 等。
font-size (字体大小)：指定文本的字体大小。
font-style (字体风格)：指定文本的字体风格，可以是 “normal”（普通）、“italic”（斜体）或 “oblique”（倾斜）。
font-weight (字体粗细)：指定文本的字体粗细，可以是 “normal”（普通）、“bold”（粗体）或数字值（例如400表示普通，700表示粗体）。
text-anchor (文本锚点)：指定文本的对齐方式。可以是 “start”（默认，文本左侧与给定的 (x, y) 坐标对齐）、“middle”（文本的中心与给定的 (x, y) 坐标对齐）或 “end”（文本右侧与给定的 (x, y) 坐标对齐）。
opacity (透明度)：指定文本的透明度。
textLength (文本长度)：指定文本的长度。当指定了这个属性时，文本将被截断或拉伸以适应指定的长度。
lengthAdjust (长度调整)：指定文本的长度如何调整以适应指定的长度。可以是 “spacing”（默认，调整字母间距）或 “spacingAndGlyphs”（调整字母间距和字形）。

代码

// 创建一个新的XML文档 $dom = new DOMDocument('1.0', 'utf-8'); // 创建 $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $text = $dom->createElement('text'); $text->setAttribute('x', '50'); $text->setAttribute('y', '100'); $text->setAttribute('fill', 'black'); // 文本颜色 $text->setAttribute('font-size', '20'); // 字体大小 $text->setAttribute('font-family', 'Arial'); // 字体样式 $text->nodeValue = 'Hello, SVG!'; // 文本内容 // 将元素添加到 $svg->appendChild($text); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <text x="50" y="100" fill="black" font-size="20" font-family="Arial">Hello, SVG!text> svg>

嵌合图片

元素用于在 SVG 画布上绘制图像。以下是一些 ` 元素的常用属性：

属性说明

x (x轴坐标)：图像左上角的 x 坐标。
y (y轴坐标)：图像左上角的 y 坐标。
width (宽度)：图像的宽度。
height (高度)：图像的高度。
href (链接)：指定要嵌入的图像的链接。可以是外部链接或者本地文件路径。
preserveAspectRatio (保持宽高比)：指定如何调整图像以适应指定的宽度和高度。可以是以下值之一：
none：图像不保持宽高比，拉伸以适应指定的宽度和高度。
xMinYMin：保持宽高比，以保证图像的左上角位于指定的 x 和 y 坐标。
xMidYMid：保持宽高比，以保证图像的中心点位于指定的 x 和 y 坐标。
xMaxYMax：保持宽高比，以保证图像的右下角位于指定的 x 和 y 坐标。
opacity (透明度)：指定图像的透明度。

代码

// 创建一个新的XML文档 $dom = new DOMDocument('1.0', 'utf-8'); // 创建 $svg = $dom->createElementNS('http://www.w3.org/2000/svg', 'svg'); $svg->setAttribute('width', '200'); $svg->setAttribute('height', '200'); // 创建元素 $image = $dom->createElement('image'); $image->setAttribute('x', '50'); $image->setAttribute('y', '50'); $image->setAttribute('width', '100'); $image->setAttribute('height', '100'); $image->setAttribute('href', 'example.jpg'); // 图像链接 // 将元素添加到 $svg->appendChild($image); $dom->appendChild($svg); header('Content-type: image/svg+xml'); echo $dom->saveXML();

xml

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <image x="50" y="50" width="100" height="100" href="example.jpg"/> svg>

特殊元素

除了常见的图形元素（如矩形、圆形、线条等）外，SVG还具有一些特殊的元素，这些元素在图形处理中起着重要的作用。以下是一些SVG的特殊元素：

：元素用于定义可重复使用的图形、滤镜效果、渐变、样式等。您可以在元素中定义这些元素，然后在需要使用它们的地方引用它们。
：元素用于定义可重复使用的图形片段，通常用于创建自定义的图标集。与类似，但元素具有一些特殊的语义，更适合用于创建图标。
：元素用于复用已定义的图形元素（如或中的内容）。通过将元素放置在需要的位置，并指定要复用的图形元素的标识符，您可以在SVG中轻松地复用图形。
：元素用于创建遮罩效果，允许您根据另一个图形来遮罩一个元素。通过在元素中定义要使用的图形，并将其应用到需要遮罩的元素上，您可以创建各种复杂的遮罩效果。
：元素用于创建填充图案，允许您使用另一个图形来填充一个元素。您可以定义元素的图案，然后在需要使用填充图案的地方引用它们

这些特殊元素使得SVG更加灵活和强大，允许您在图形中实现更多复杂的效果和交互。通过结合使用这些特殊元素，您可以创建出色的SVG图形。

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）