SVG 可縮放矢量圖形

SVG Scalable Vector Graphics

SVG 使用 XML 格式定義圖像

內嵌使用

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle
    cx="100"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
    />
</svg>

外部引用

<embed src="circle.svg" type="image/svg+xml" />

示例

1、矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect
    x="50"
    y="20"
    width="300"
    height="100"
    style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0);"
    />
</svg>

x 矩形到瀏覽器窗口左側的距離
y 矩形到瀏覽器窗口頂端的距離
width 寬度
height 高度
fill 填充顏色
stroke-width 邊框寬度
stroke 邊框顏色

2、10 號字

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <text fill="#000000" font-size="10" font-family="Verdana" x="0" y="10">
        你好
      </text>
    </svg>

資源

SVG 教程 https://www.runoob.com/svg/svg-tutorial.html

SVG 在線編輯 https://c.runoob.com/more/svgeditor/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章