走進SVG之圖像編程第二章 [SVG世界-視窗-視野]

在SVG中，它的世界是無窮大的，咱們定義因此圖形都會被構建。而咱們在瀏覽器中看到的畫面實際上是咱們定義的視窗和視野。

<svg height="500" width="200">  height和width控制咱們的視窗大小

<svg height="500" width="200" viewBox="0 0 500 200" preserveAspectRadtio ="xMidYMid meet" >複製代碼

viewBox="x,y,width,height"  x軸與y軸的值的參照物是<svg>,width和height越大距離svg的視野也越遠，width和height越小距離svg的視野也越近。

preserveAspectRadtio : align meetOrSlice   align視窗相對視野的方向

svg圖形分組

當咱們建立完一套圖形時候能夠對此圖形進行定義爲分組，而且在後面可使用<use>進行<g>分組引用。這裏咱們就要用到<g>

<g>
    <rect width="20" height="100" fill="red" x="0" y="0">
    <rect width="50" height="10" fill="red" x="0" y="100">
</g>複製代碼

1.

對<g>設置屬性，它的全部子標籤都會被繼承。

2.<g>能夠嵌套使用

3.<g>可使用transform進行座標轉換

<use xlink:href="#"> 分組引用,xlink:href=爲<g>標籤的id

SVG文本

共有屬性：

X:  定位X軸位置

y: 定位Y軸位置

dx: 相對於文本基線位置的X軸偏移

dy： 相對於文本基線位置的Y軸偏移

style: 設置樣式