数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML5 中绘制 SVG Logo？
在下面的文章中，我们将学习如何在 HTML5 中绘制 SVG logo。在深入文章之前，让我们先讨论一些关于 SVG 的事情。称为可缩放矢量图形 (SVG) 的图像格式使用矢量数据。与其他格式不同，SVG 不使用独特的像素来构建您的图像。它改为使用矢量数据。
使用它的最大好处是可以创建可缩放至任何分辨率的图片，这使得它们非常适合网页设计以及许多其他应用。
让我们来看一个简单的例子来理解 SVG
示例
<!DOCTYPE html>
<html>
<body>
<svg width="110" height="150">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
</svg>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含在网页上绘制的 SVG 圆圈，以及上述脚本中给定的尺寸。
什么是 SVG
使用 SVG，一种使用 XML 的标记语言，来描述二维矢量图形。这是一种基于文本的技术，它与其他技术（如 CSS、DOM、JavaScript 和 SMIL）一起工作，以描述任何尺寸的图像。
例如，SVG 格式的矢量图片可以缩放而不损失质量。与 JPEG 和 PNG 等位图图片相比，它们还可以本地化而无需使用图形编辑器。
以下是使用 HTML5 绘制 SVG Logo 的示例
示例 1
在下面的示例中，我们将在网页上创建一个 SVG logo。
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
<stop offset="0"
style="stop-color:rgb(187, 143, 206);" />
<stop offset="1"
style="stop-color:rgb(192, 57, 43);" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
<text fill="#58D68D" font-size="14" font-family="Verdana"
x="50" y="86">TUTORIALSPOINT</text>
</svg>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含一个绘制有线性渐变的椭圆，以及文本“TUTORIALSPOINT”，作为网页上的 logo。
示例 2
考虑以下示例，我们将在网页上创建 SVG logo
<!DOCTYPE html>
<html>
<body>
<svg width="140px" height="320px">
<rect x="19" y="19" width="110" height="300"
fill="white" stroke="black" stroke-width="3" />
<circle cx="75" cy="85" r="30"
fill="red" stroke="black" stroke-width="2" />
<circle cx="75" cy="165" r="30"
fill="yellow" stroke="black" stroke-width="2" />
<circle cx="75" cy="245" r="30"
fill="#40CC40" stroke="black" stroke-width="2" />
</svg>
<p>FOLLOW TRAFFIC SIGNALS</p>
</body>
</html>
运行上述脚本后，它将生成一个输出，其中包含使用上述脚本中给定的尺寸在网页上绘制的交通信号灯，作为 logo。
示例 3
让我们再看一个例子，我们在其中在网页上创建 SVG logo。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG logo</title>
</head>
<body>
<svg height="170" width="400">
<defs>
<linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(184,78,43);stop-opacity:1" />
<stop offset="50%"
style="stop-color:rgb(241,241,241);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,141,52);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
<text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
x="50" y="86">logo</text>
</svg>
</body>
</html>
运行上述脚本后，将弹出输出窗口，显示提到的 SVG logo，以及使用上述脚本中提到的尺寸在网页上绘制的线性渐变。
更新于: 2022-12-16
2K+ 阅读量
广告