走进SVG-html教程-PHP中文网

首页

web前端

html教程

走进SVG

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 29, 2016 am 09:19 AM

什么是SVG？也许现在很多人都听说过SVG的人比较多，但不一定了解什么是SVG：SVG(Scalable Vector Graphics 一大串看不懂的英文)可伸缩矢量图形，它是用XML格式来定义用于网络的基于矢量的图形，而它的特点就是图像在放大或改变尺寸的情况下其图形质量不会有所损失，同时他和DOM一样都是W3C的一个标准。

这里解释下位图和矢量图：

位图，也就是我们经常能看到的图片，他是一个平面上密集排布的店的集合，也就是说它是由一个个点构成的。而如果对他进行放大那么相对应的点就会进行放大，这样就会让图片显得十分不清晰粗糙。

矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

(ps:本随笔下面的内容部分来自W3Cschool)

一个简单的SVG

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" standalone="no"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;">
  stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span>

SVG 代码解析：

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以

SVG 的用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

SVG的优势

SVG 可被非常多的工具读取和修改（记事本也可以轻松打开修改）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 等技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG 文件可通过以下标签嵌入 HTML 文档：、

SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

矩形

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #ff0000;">
xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">rect </span><span style="color: #ff0000;">x</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="250"</span><span style="color: #ff0000;">
height</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:red;stroke:black;
stroke-width:5;opacity:0.5"</span><span style="color: #0000ff;">/></span>

<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

rx 和 ry 属性可使矩形产生圆角。

圆形

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;">
  stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

椭圆

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="240"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="220"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:purple"</span><span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="220"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="190"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:lime"</span><span style="color: #0000ff;">/></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="210"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="45"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="170"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="15"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="fill:yellow"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span>

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

线

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">line </span><span style="color: #ff0000;">x1</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y1</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> x2</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> y2</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="stroke:rgb(255,0,0);stroke-width:2"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

多边形

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">polygon </span><span style="color: #ff0000;">points</span><span style="color: #0000ff;">="200,10 250,190 160,210"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="fill:lime;stroke:purple;stroke-width:1"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

points 属性定义多边形每个角的 x 和 y 坐标

折线（用于创建任何只有直线的形状）

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">polyline </span><span style="color: #ff0000;">points</span><span style="color: #0000ff;">="20,20 40,25 60,40 80,120 120,140 200,180"</span><span style="color: #ff0000;">
  style</span><span style="color: #0000ff;">="fill:none;stroke:black;stroke-width:3"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

路径

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">path </span><span style="color: #ff0000;">d</span><span style="color: #0000ff;">="M150 0 L75 200 L225 200 Z"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

元素用于定义一个路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

文本

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">text </span><span style="color: #ff0000;">x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="15"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span><span style="color: #ff0000;"> transform</span><span style="color: #0000ff;">="rotate(30 20,40)"</span><span style="color: #0000ff;">></span>I love SVG<span style="color: #0000ff;"></span><span style="color: #800000;">text</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span>

SVG 滤镜

SVG可用的滤镜是：

feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤

除此之外，您可以在每个 SVG 元素上使用多个滤镜！

和

所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。

标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feGaussianBlur </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> stdDeviation</span><span style="color: #0000ff;">="15"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">filter</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span></span>

元素id属性定义一个滤镜的唯一名称
元素定义模糊效果
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
元素的滤镜属性用来把元素链接到"f1"滤镜

SVG

元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。

第一个例子偏移一个矩形（带），然后混合偏移图像顶部（含）：

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="200%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="200%"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feOffset </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> dx</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> dy</span><span style="color: #0000ff;">="20"</span> <span style="color: #0000ff;">/></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="normal"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">filter</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

元素id属性定义一个滤镜的唯一名称
元素的滤镜属性用来把元素链接到"f1"滤镜

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="f1"</span><span style="color: #ff0000;"> x</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> y</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="200%"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="200%"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feOffset </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> dx</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> dy</span><span style="color: #0000ff;">="20"</span> <span style="color: #0000ff;">/></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feGaussianBlur </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="blurOut"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="offOut"</span><span style="color: #ff0000;"> stdDeviation</span><span style="color: #0000ff;">="10"</span> <span style="color: #0000ff;">/></span>
      <span style="color: #0000ff;"><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="blurOut"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="normal"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">filter</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">rect </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="90"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="green"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="3"</span><span style="color: #ff0000;">
  fill</span><span style="color: #0000ff;">="yellow"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#f1)"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

元素的stdDeviation属性定义了模糊量

SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型：

Linear
Radial

SVG 线性渐变 -

元素用于定义线性渐变。

标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平，垂直或角渐变：

当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">linearGradient </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="grad1"</span><span style="color: #ff0000;"> x1</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> y1</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> x2</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> y2</span><span style="color: #0000ff;">="0%"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,255,0);stop-opacity:1"</span> <span style="color: #0000ff;">/></span>
      <span style="color: #0000ff;"><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,0,0);stop-opacity:1"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">linearGradient</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="85"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="url(#grad1)"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

标签的id属性可为渐变定义一个唯一的名称
标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变

SVG 放射性渐变 -

元素用于定义放射性渐变。

标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

<span style="color: #0000ff;"><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">radialGradient </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="grad1"</span><span style="color: #ff0000;"> cx</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> fx</span><span style="color: #0000ff;">="50%"</span><span style="color: #ff0000;"> fy</span><span style="color: #0000ff;">="50%"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="0%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(255,255,255);
      stop-opacity:0"</span> <span style="color: #0000ff;">/></span>
      <span style="color: #0000ff;"><span style="color: #800000;">stop </span><span style="color: #ff0000;">offset</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="stop-color:rgb(0,0,255);stop-opacity:1"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">radialGradient</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">defs</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="200"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="70"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="85"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="55"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="url(#grad1)"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

标签的 id 属性可为渐变定义一个唯一的名称
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个标签指定。offset属性用来定义渐变色开始和结束
填充属性把ellipse元素链接到此渐变

菜鸟教程的在线实例：http://www.runoob.com/svg/svg-examples.html

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles