标签 SVG 下的文章

svg标签既能设置widthheight属性,又能设置viewBox属性,而svg作为一个 html 标签,也能在 css 或者 style 中设置widthheight。这三者的关系是什么?

1、只有viewBox属性

这里有一个 svg 制作的鸡蛋黄(有点黄,可能是一个咸鸡蛋黄),代码如下:

<style>
    #svg{
        background-color:antiquewhite;
    }
</style>

<svg id="svg" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="100" fill="darkorange"></circle>
</svg>

效果如下:

1.png

可以看到,半径是100的圆,填满了整个svg,因为svgviewBox的长宽都是200。而svg标签作为 html 元素,又填满了整个页面宽度,并不是200*200的尺寸。

下面我们改变一下viewBox的大小:
...viewBox="0 0 100 100"
效果是这样的:

1 (1).png

viewBox变大一些呢?
...viewBox="0 0 300 300"
效果是这样的:

1 (2).png

现在这个鸡蛋黄已经不能占满整个 svg “画布”了。如果修改鸡蛋黄的圆心坐标为viewBox的中心点,是不是会让鸡蛋黄居中呢?

<circle cx="150" cy="150"...>

确实居中了:

1 (3).png

看来圆的坐标系是viewBox

2、给 svg 标签添加widthheight属性

将代码恢复到最原始的样子,并进行下面的修改:

<svg height="100" width="100"...

变化如下:

1 (4).png

svg 作为 html 元素,长宽都变成了100px,但鸡蛋黄还是占满整个svg标签。看来svgwidthheight属性是用来控制svg作为 html 元素的宽高的,不会影响svg里面的形状等元素的大小。

3、设置 css 宽高

在上面代码的基础上,再添加下面的代码:

...
#svg{
    height: 300px;
    width: 300px;
    ...
}
...

这时候有了下面这种变化:

1.png

svg 元素的宽高变成了 css 中设置的300px

4、总结

根据上面的表现,可以得出下面的结论:

  1. 不提各种坐标,简单理解,可以将viewBox看作是svg画布大小。画布变大了,里面的形状当然就显得小了;如果画布变小了,就有可能将里面的形状裁切。这跟 Photoshop 中的图像 - 画布大小命令表现是一样的。
  2. svg 的widthheight属性设置的是svg这个 html元素 的大小。因为 svg 是矢量图形,所以 svg 的viewBox,包括viewBox中的内容会等比缩放,但并不会变形。当然,widthheight要和viewBox等比例,否则会出现裁切
  3. css 中的widthheight会覆盖 svg 标签本身的widthheight属性,也就是 css 的宽高具有更高的优先级。

在制作svg图形时,可以任意定义viewBox大小,并在其中放置各种形状,这些形状(包括文字等)的定位都相对viewBox。而svg实际应用后的大小,取决于widthheight属性,或者css样式。

是不是非常简单?


End

在线演示:

Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio

以下内容都是基于preserveAspectRatio为默认状态时的情况,也就是不考虑preserveAspectRatio。

为什么设置viewBox的min-x, min-y后,如果设置的是正值,图像反而会向左/上移动,而设置负值则向右/下移动呢?
我是这么理解的:

  1. viewBox的左上角总是和视窗的左上角对齐。
  2. 在设置viewBoxmin-xmin-y后,
    1. 首先,图像的位置并不会移动;
    2. 如果设置的为正值,viewBox的起点就会向右/下移动;
    3. 由于图像位置不变,还是基于视窗的左上角,所以图像会被裁切。如果设置的是负值,就相当于PS中扩展画布左/上会填充空白。
    4. 之后,viewBox的起点会移动到视窗的原点位置,所以,如果设置的值是正值,图像就会被裁切,而如果设置的是负值,就会发现图像左左侧/上侧填充了空白。
    5. viewBox起点与视窗的起点对齐,这时候就出现了文章开始让人疑惑的现象。

这里有张鑫旭的文章,讲解的非常透彻
理解SVG viewport,viewBox,preserveAspectRatio缩放 张鑫旭