SVG
會在SVG Canvas底下渲染
SVG Canvas需對應有限尺寸的viewport
圖形
矩形
<rect id="A" x="33" y="34" fill="#FF6CC4" stroke="#C30D23" stroke-width="3" width="75" height="75"/>
x、y
圖形左上錨點
width、height
圖形寬高
單位為 px
圓角矩形
<rect x="60" y="10" rx="10" ry="10" width="75" height="75" stroke="#FF5500" stroke-width="5" fill="#FFB255"/>
多了圓角半徑屬性
rx、ry
多邊形
<polygon fill="#D271FF" points="100,56 62,107 37,49"/>
points
標記多邊形的各個點
即幾邊形就會有幾個點
圓形
<circle fill="#FF4343" stroke="#890000" stroke-width="5" cx="80.141" cy="73.446" r="44"/>
cx、cy
圖形圓心
r
半徑
橢圓
<ellipse fill="#77DD47" stroke="#246614" stroke-width="5" cx="100" cy="75" rx="67" ry="44"/>
分為X、Y方向半徑屬性
rx、ry
Stroke
table:stroke
stroke 邊框顏色
stroke-width 邊框寬度
stroke-linecap 邊框端點屬性
butt（預設）、square、round
stroke-linejoin 邊框兩端接合尖角屬性
miter（預設）、round、bevel
stroke-dasharray 邊框虛線化的長度與間隔
單數值為實線長度，雙數值為虛線長度
stroke-dashoffset 邊框虛線化相對起點的偏移量
正值向右，負值向左
SVG標籤上的width和height屬性可設定viewport尺寸
<svg width="800" height="600"><!-- SVG --></svg>
無單位的值會採用用戶座標系裡的單位
預設為px
其他也支援em、ex、px、pt、pc、cm、mm、in、%
初始化座標系以左上角為(0,0)開始計算
X軸向右為正向
Y軸向下為正向
<svg viewBox="<min-x> <min-y> width height"></svg>
preserveAspectRatio
Fill
code:html
<div class="crossed">
<textarea>This is a test</textarea>
<svg>
<line x1="0" y1="100%" x2="100%" y2="0" />
<line x1="0" y1="0" x2="100%" y2="100%" />
</svg>
</div>
code:css
.crossed {
position: relative;
width: 200px;
height: 80px;
}
.crossed svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.crossed svg line {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
.crossed textarea {
width: 100%;
height: 100%;
box-sizing:border-box;
}