深入SVG
由于是矢量图像,SVG 图像可以无限缩放并且不会出现图像质量下降的任何问题。为何如此?因为 SVG 图像是使用XML 标记构建的,浏览器通过绘制每个点和线来打印它们,而不是用预定义的像素填充一些空间。这确保了 SVG 图像可以适应不同的屏幕尺寸和分辨率,即使是尚未发明的屏幕尺寸和分辨率。
语法
<svg>
标签
SVG 代码都放在顶层标签<svg>
之中。下面是一个例子。
<svg width="100%" height="100%"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg>
的width属性和height属性,指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位,也可以采用绝对单位(单位:像素)。如果不指定这两个属性,SVG 图像默认大小是300像素(宽) x 150像素(高)。
如果只想展示 SVG 图像的一部分,就要指定viewBox
属性。
<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg>
<viewBox>
属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像是100像素宽 x 100像素高,viewBox
属性指定视口从(50, 50)
这个点开始。所以,实际看到的是右下角的四分之一圆。
注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。如果不指定width
属性和height
属性,只指定viewBox
属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2.2 <circle>
标签
<circle>
标签代表圆形。
<svg width="300" height="180"> <circle cx="30" cy="50" r="25" /> <circle cx="90" cy="50" r="25" class="red" /> <circle cx="150" cy="50" r="25" class="fancy" /> </svg>
上面的代码定义了三个圆。<circle>
标签的cx
、cy
、r
属性分别为横坐标、纵坐标和半径,单位为像素。坐标都是相对于<svg>
画布的左上角原点。