HTML SVG-html教程-PHP中文网

在 HTML 中使用图像对于多媒体丰富的网站来说非常棒。您所要做的就是在 HTML 代码中添加一个标签，然后 viola，您的浏览器就会显示您选择的图像，甚至添加一个链接。当您知道图像或图表将被放大时，这会有点麻烦，因为 JPG 或 PNG 一旦放大到超过其分辨率，就不会显示任何进一步的细节。 SVG 就是这个问题的解决方案。 SVG 代表可缩放矢量图形。顾名思义，这些可以根据需要放大，并且细节永远不会消失。 SVG 并不是 Web 技术所独有的，但在 HTML 中使用它们确实很巧妙。 SVG 对于浏览器中的图表、矢量图、图表和图形很有用。

在 HTML 中嵌入 SVG 的语法：

与在 HTML5 中使用 canvas 类似，有一个简单的标签可用于在 HTML5 页面中嵌入 SVG。

语法：

<svg width="width here" height="height here ">
…. …. …. ….
</svg>

登录后复制

HTML 中的 SVG 示例

下面给出了一些可以在 HTML5 中创建和嵌入的矢量示例：

示例 #1 – 在 HTML 中通过 SVG 绘制矩形

代码：

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/>
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #2 – 在 SVG 中绘制带圆角的正方形

对于带有圆角的正方形，除了正方形的大小和尺寸外，我们还必须使用 rx、ry 来定义角的半径。

代码：

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #3 – 在 SVG 中绘制一个圆圈，其中包含轮廓和颜色填充

代码：

<!DOCTYPE html>
<html>
<body>
<svg width= "400" height= "400">
<circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" />
Sorry but this browser does not support inline SVG.
</svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #4 – 在 HTML5 中使用 SVG 绘制直线

我们可以使用用于在 HTML5 SVG 中绘制直线的标签；颜色、线条粗细、位置都可以定义。

代码：

<html>
<body>
<svg width= "400" height= "400">
<line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/>
</svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #5 – 在 HTML5 中通过 SVG 绘制日食

我们可以使用标签在 HTML5 SVG 中绘制日食；它的颜色和位置可以沿着模具及其半径定义。

代码：

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" />
Sorry but this browser does not support inline SVG.</svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #6 – 在 HTML5 中使用 SVG 创建多边形

标签可在 SVG 中用于创建多边形。在标签中，我们需要提及每个点的位置。填充颜色、轮廓粗细等，也可以在代码中定义。

代码：

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600" >
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #7 – 在 HTML5 中使用 SVG 创建折线

折线用于绘制仅由直线组成的形状。请记住，这些线也必须连接。这是 HTML5 中折线实现的示例。

代码：

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #8 – 在 HTML5 中使用 SVG 绘制文本

在许多情况下，文本对于任何 SVG 都是必需的，例如标记图表等。幸运的是，存在一个。 SVG 中可以使用的标签。文本可以设置在 SVG 中的任何位置，您也可以自定义其颜色和其他细节。

代码：

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #9 – 在 HTML5 中使用 SVG 绘制星星

现在我们已经完成了基础知识，让我们创建一个借助 SVG 制作的星星。

代码：

<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198"
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

登录后复制

输出：

HTML SVG

示例 #10 – 在 SVG 中使用线性渐变

您可以在 SVG 多行 HTML Canvas 中使用线性和径向渐变。渐变必须嵌套在中。标签。然后在 SVG 标签中标记该标签以指示其用途。让我们看一个在 Eclipse 中使用 Gradient 的示例。

代码：

<!DOCTYPE html>
<html>
<body>
<svg height="300" width="400">
<defs>
<linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
Sorry but this browser does not support inline SVG. </svg>
</body>
</html>

登录后复制

输出：

HTML SVG