SVG的基本形狀

隨著html5技術的發展,SVG繪圖技術也越來越被廣範使用,除了可以大幅降低網頁流量之外,也可以避免圖片解析不穩定的問題,這一篇先寫一些基本的圖形標籤。

svg-logo-h

  • 矩形:

<rect x="33″ y="34″ width="75″ height="75″ fill="#FF6CC4″ stroke="#C30D23″ stroke-width="3″/>

x和y是矩形左上角的座標

  • 圓角矩形:

<rect x="60″ y="10″ rx="10″ ry="10″ width="75″ height="75″ fill="#FFB255″ stroke="#FF5500″ stroke-width="5″ />

rx、ry的圓角半徑

  • 圓形:

<circle cx="80.141″ cy="73.446″ r="44″ fill="#FF4343″ stroke="#890000″ stroke-width="5″ />

cx和cy代表圓心座標

  • 橢圓:

<ellipse cx="100″ cy="75″ rx="67″ ry="44″ fill="#77DD47″ stroke="#246614″ stroke-width="5″ />

rx和ry代表X和Y方向的半徑

  • 多邊形:

<polygon points="100,56 62,107 37,49 fill="#D271FF" stroke="#246614″ stroke-width="5″/>

point表示有幾個點,每個點的座標

 

變形

<rect fill="#09c" width="60″ height="60″ x="0″ y="0″ transform="translate(100,50)" />

Transform屬性:

    • translate()
    • rotate()
    • scale()
    • skewX()
    • skewY()
    • matrix()

多屬性變形:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

transform: matrix(1, -0.3, 0, 1, 0, 0);

Leave a Reply