一、什么是 SVG ?
SVG,即可缩放矢量图形(Scalable Vector Graphics)。
它是一种基于 XML 的标记语言,可以创建复杂的矢量图形。
与位图不同,矢量图形可以无限缩放,而不会失去清晰度。这使得 SVG 成为一种非常方便的多媒体图形格式,特别适合在网页上使用。
下面是一个简单的 SVG 示例:
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red" /> </svg>
二、SVG 元素
SVG 通过在页面上嵌入元素来创建图形。以下是一些常用的 SVG 元素:
1. <rect> 元素
<rect> 元素创建一个矩形。可以设置它的位置、大小、颜色等属性。
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red" /> </svg>
2. <circle> 元素
<circle> 元素创建一个圆形。可以设置它的位置、半径、颜色等属性。
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg>
3. <line> 元素
<line> 元素创建一条直线。可以设置它的起点和终点的坐标、颜色等属性。
<svg width="100" height="100"> <line x1="10" y1="10" x2="90" y2="90" stroke="black" /> </svg>
4. <text> 元素
<text> 元素在 SVG 中创建文本。
<svg width="100" height="100"> <text x="50" y="50" font-size="20" fill="black">Hello SVG!</text> </svg>
5. <path> 元素
<path> 元素在 SVG 中创建复杂的路径。
<svg width="100" height="100"> <path d="M10 10 L50 90 L90 10" stroke="black" fill="none" /> </svg>
三、SVG 属性
SVG 元素可以设置许多属性,用于调整它们的外观、位置和交互。以下是一些常用的 SVG 属性:
1. width 和 height 属性
width 和 height 属性定义了 SVG 元素的宽度和高度。
<svg width="100" height="100"> ... </svg>
2. x 和 y 属性
x 和 y 属性定义 SVG 元素的左上角的坐标。
<svg> <rect x="10" y="10" ... /> <circle cx="50" cy="50" ... /> ... </svg>
3. fill 和 stroke 属性
fill 和 stroke 属性分别用于设置 SVG 元素的填充颜色和描边颜色。
<rect fill="red" stroke="black" ... /> <circle fill="blue" stroke="black" ... /> <line stroke="black" ... /> <text fill="black" ... > ... </text> <path stroke="black" fill="none" ... />
4. transform 属性
transform 属性用于旋转、缩放、平移和倾斜 SVG 元素。
<rect transform="rotate(45)" ... /> <circle transform="scale(2)" ... /> <line transform="translate(20,20)" ... /> <text transform="skewX(45)" ... >...</text> <path transform="scale(3) rotate(30)" ... />
四、SVG 交互
SVG 可以响应用户交互,例如鼠标移动、点击等。下面是一些常用的 SVG 交互事件:
1. onclick 事件
onclick 事件在用户单击 SVG 元素时触发。下面的示例会在每次单击时改变矩形的颜色。
<svg> <rect id="myRect" fill="red" width="100" height="100" onclick="document.getElementById('myRect').setAttribute('fill', 'blue');" /> </svg>
2. onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件在用户将鼠标移到 SVG 元素上或移开时触发。下面的示例会在鼠标移到圆形上时改变它的颜色。
<svg> <circle id="myCircle" fill="green" cx="50" cy="50" r="40" onmouseover="document.getElementById('myCircle').setAttribute('fill', 'blue');" onmouseout="document.getElementById('myCircle').setAttribute('fill', 'green');" /> </svg>
五、SVG 在 HTML 中的使用
在 HTML 中,可以通过下面的方式嵌入 SVG 图像:
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red" /> </svg>
SVG 也可以通过<img>标签来嵌入:
<img src="myimage.svg" width="100" height="100" />
如果需要在 HTML 中直接嵌入 SVG 并与 HTML 元素进行交互,可以使用<object>或<iframe>元素:
<object type="image/svg+xml" data="myimage.svg" width="100" height="100"></object>
六、SVG MDN 参考文档
以上内容仅是 SVG 的基本语法和常用元素,更多内容和详细参数请参考 SVG MDN 文档。