“HTML SVG 图形”的版本间差异
本页内容
（创建页面，内容为“SVG 以 XML 格式定义基于矢量的图形。 == 什么是 SVG？ == SVG 代表可缩放矢量图形 SVG 用于为 Web 定义图形 SVG 是 W3C 推荐的 == HTML <svg> 元素 == HTML''' <nowiki><svg></nowiki> '''元素是 SVG 图形的容器。 SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 == SVG 圆形 == <html> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />…”） |
（→SVG 标志） |
||
| 第94行： | 第94行： | ||
</sample> | </sample> | ||
== SVG 标志 == | == SVG 标志 == | ||
SVG | <html> | ||
<svg height="130" width="500"> | |||
<defs> | |||
<linearGradient id="grad1" x1="0%" | |||
y1="0%" x2="100%" y2="0%"> | |||
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" | |||
/> | |||
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> | |||
</linearGradient> | |||
</defs> | |||
<ellipse cx="100" cy="70" rx="85" ry="55" | |||
fill="url(#grad1)" /> | |||
<text fill="#ffffff" font-size="45" | |||
font-family="Verdana" x="50" y="86">SVG</text> | |||
Sorry, your browser does not | |||
support inline SVG. | |||
</svg> | |||
</html> | |||
<sample title="" hererun="s" desc="" > | <sample title="" hererun="s" desc="" > | ||
| 第118行： | 第138行： | ||
</sample> | </sample> | ||
== SVG 和 Canvas 的区别 == | == SVG 和 Canvas 的区别 == | ||
SVG 是一种用 XML 描述 2D 图形的语言。 | SVG 是一种用 XML 描述 2D 图形的语言。 | ||
2022年8月14日 (日) 22:19的版本
SVG 以 XML 格式定义基于矢量的图形。
什么是 SVG？
SVG 代表可缩放矢量图形 SVG 用于为 Web 定义图形 SVG 是 W3C 推荐的
HTML <svg> 元素
HTML <svg> 元素是 SVG 图形的容器。
SVG 有多种绘制路径、框、圆、文本和图形图像的方法。
SVG 圆形
示例
<!DOCTYPE html>
<html>
<body>
<svg
width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
</body>
</html>SVG 正方形
示例
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>SVG 圆角方形
示例
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20"
width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>SVG 星
示例
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>SVG 标志
示例
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"
/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55"
fill="url(#grad1)" />
<text fill="#ffffff" font-size="45"
font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not
support inline SVG.
</svg>SVG 和 Canvas 的区别
SVG 是一种用 XML 描述 2D 图形的语言。
Canvas 动态绘制 2D 图形（使用 JavaScript）。
SVG 是基于 XML 的，这意味着每个元素都可以在 SVG DOM 中使用。您可以为元素附加 JavaScript 事件处理程序。
在 SVG 中，每个绘制的形状都被记忆为一个对象。如果 SVG 对象的属性发生变化，浏览器可以自动重新渲染形状。
画布是逐像素渲染的。在画布中，一旦图形被绘制出来，浏览器就会忘记它。如果要更改其位置，则需要重新绘制整个场景，包括可能已被图形覆盖的任何对象。
Canvas 和 SVG 的比较
下表显示了 Canvas 和 SVG 之间的一些重要区别：