27、Windows 8 应用开发中的 SVG 样式设计

Windows 8 应用开发中的 SVG 样式设计

1. SVG 简介

SVG（Scalable Vector Graphics）即可缩放矢量图形，具有诸多优势，如可嵌入 HTML 中，能通过 CSS 属性对其进行样式设计。SVG 的 CSS 属性包括填充（fill）、描边（strokes）、标记（markers）、滤镜（filters）、遮罩（masks）、指针事件（pointer events）和可见性（visibility）等。

2. 应用示例：Hub 上的精美 SVG 磁贴

许多 Windows 8 应用使用内置的 ListView 控件来显示项目网格。典型的 Windows 8 网格项目是矩形的，类似磁贴。但我们可以设计更精美的样式。

假设正在创建一个绘画应用，网格的某一部分要展示用户的绘画文档，且希望这些项目呈现出类似由几笔笔触构成的大致矩形形状。

操作步骤如下：
1. 创建 SVG 图形 ：使用 CorelDRAW 创建所需图形，CorelDRAW 能将图形保存为 SVG 格式。
2. 将 SVG 图形置于 ListView 磁贴后方 ：
- HTML 代码 ：

<!-- HTML snippet -->
<section aria-label="Main content" role="main">
    <div id="listview" data-win-contro