SVG 元素

SVG 元素SVG 坐标系统

SVG 元素

SVG 图像是使用各种元素创建的,这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素,svg 元素可以用于在当前文档(比如说,一个HTML文档)内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

svg元素使用规则所有SVG图像的根元素都是 元素。svg元素使用规则:

xmlns:xlink="http://www.w3.org/1999/xlink">

请记住不要忘记使用两个命名空间声明,否则Firefox不会将SVG文件呈现为图像,而是将其解释为任何其他XML文件。

嵌套SVG元素SVG元素可以相互嵌套,如下所示:

xmlns:xlink="http://www.w3.org/1999/xlink">

嵌套SVG元素可用于将SVG形状分组在一起,并将其放置为一个集合。嵌套在svg元素内的所有形状都将相对于其包围svg元素的位置(x,y)定位(x,y)。通过移动封闭svg元素的x和y坐标 ,您也可以移动所有嵌套的形状。这是一个在两个svg元素内嵌套两个矩形的示例。除颜色外,两个矩形的x,y,高度和宽度定义相同。包围的 svg元素具有不同的x值。由于矩形的x位置是相对于其封闭svg元素x位置解释的,因此两个矩形在不同的x位置显示。

在线示例示例

xmlns:xlink="http://www.w3.org/1999/xlink">

style="stroke:#ff0000; fill: #0000ff"/>

style="stroke:#009900; fill: #00cc00"/>

测试看看 ‹/›注意名称空间属性仅在根svg元素上是必需的。svg如果未设置任何名称空间,则假定所有嵌套元素都在默认名称空间(在根元素中设置)内。这是运行上面代码生成的SVG图像:

SVG 元素SVG 坐标系统