svg復用元素的方式主要有 , , ,
1.
group, 分組，定義一組元素，初始不可見
<g id
="group"
fill
="red"
>
<
rect
x="10"
y="10"
width
="100"
height
="100"
/>
<
rect
x="120"
y="10"
width
="100"
height
="100"
/>
g>
2.
定義一些可供重用的元素，組，普通形狀，漸變，mask，濾鏡fliter，初始不可見
例如：
<defs
>
<
g id
="g1"
>
<
rect
id="rect1"
width
="100"
height
="50"
x="10"
y="10"
fill
="#c00"
/>
<
circle
id="circle1"
cx="30"
cy="30"
r="10"
fill
="#00c"
/>
g>
<
lineargradient
id="a1"
>
<
stop
offset
="5%"
stop-color
="#f00"
/>
<
stop
offset
="95%"
stop-color
="#ff0"
/>
lineargradient
>
<
path
id="a1"
d="m0 50 c150 150 100 -50 300 50"
stroke
="#000"
fill
="none"
/>
<
mask
id="mask1"
>
<
rect
x="50"
y="50"
width
="100"
height
="100"
fill
="#ccc"
/>
<
rect
x="150"
y="150"
width
="50"
height
="50"
fill
="#fff"
/>
mask
>
<
filter
width
="200"
height
="200"
x="0"
y="0"
id="blur"
filterunits
="userspaceonuse"
>
<
fegaussianblur
stddeviation
="5"
/>
filter
>
defs
>
3.
使用定義的元素，包括, ,
<use
xlink:href
="#g1"
/>
<
use
xlink:href
="#rect1"
x="110"
/>
<
use
xlink:href
="#circle1"
x="210"
/>
4.
定義可重複使用的符號，初始不顯示，能夠建立自己的視窗，所以能夠應用viewbox和preserveaspectratio屬性
<symbol
id="symbol"
viewbox
="0 0 250 250"
>
<
rect
x="90"
y="110"
width
="100"
height
="100"
/>
symbol
>
<
use
id="ant"
transform
="translate(0 110) rotate(10 0 0)"
fill
="red"
xlink:href
="#symbol"
/>
SVG 嵌入 HTML頁面的幾種方式
svg 嵌入 html頁面的幾種方式 svg目前嵌入html頁面中有下面幾種方式 object object data rect.svg width 300 height 100 type image svg xml codebase 採用object標籤的乙個好處是，這是乙個標準的html 4及以...
SVG基礎 繪製SVG矩形
乙個元素代表乙個svg矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪製直角或圓角的矩形。乙個svg矩形的簡單例子 下面是乙個繪製svg矩形的簡單例子。複製 svg矩形的位置由x和y屬性決定。請記住，這個位置是相對於任何它最接近的父元素的位置。svg矩...
SVG相關學習 一 SVG基礎
svg svg 指可伸縮向量圖形 scalable vector graphics svg viewboxviewport svg 實際大小 viewbox x,y,width,height x 左上角橫座標，y 左上角縱座標，width 寬度，height 高度 視區盒子 以視區盒子大小選中元素然...