Svg 一種 基於xml的圖像文件格式,爲可縮放的矢量圖
svg繪製的每一個圖形都可以選中dom對象,因爲這些圖形本質上都是html標籤。
效果:
代碼:
<!-- svg畫布 -->
<svg width="800" height="800">
<!-- 繪製矩形 -->
<rect
width="50"
height="50"
style="fill:red;stroke-width:1px;stroke:rgba(0,0,0,.2);"
></rect>
<!-- 繪製線段 -->
<line
x1 ="100"
y1 ="100"
x2 ="200"
y2 ="200"
style ="stroke:blue;stroke-width:1px;"
></line>
<line
x1 ="200"
y1 ="200"
x2 ="300"
y2 ="250"
style ="stroke:blue;stroke-width:1px;"
></line>
<!-- 繪製圓形 -->
<circle
cx="500"
cy="400"
r="50"
stroke="green"
stroke-width="2"
fill="red"
>
</circle>
</svg>