SVG(可縮放矢量圖形)是一種基于 XML 的圖形格式,它可以用于繪制各種各樣的圖形,如圖形、曲線和文本等。而 CSS (層疊樣式表)是一種樣式表語言,它用于描述網頁的樣式,包括字體、顏色、邊框和背景等。
在 SVG 中,我們可以使用 CSS 屬性來設置圖形的樣式,包括邊框的樣式、寬度、顏色等。下面是一段示例代碼:
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" style="stroke: #333; stroke-width: 4px; fill: none;" /> </svg>
在這個例子中,我們使用了<rect>元素繪制了一個寬度為80像素、高度為80像素的矩形,起始坐標是(10,10)。邊框的顏色是黑色(#333),寬度是4像素,填充是透明的(none)。可以看到,在 SVG 中,我們可以使用 style 屬性來直接設置圖形的樣式。
如果我們想按照 CSS 的方式來設置邊框樣式,可以使用 CSS 屬性來設置。例如:
<style> rect { stroke: #333; stroke-width: 4px; fill: none; } </style> <svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" /> </svg>
在這個例子中,我們使用 <style> 標簽定義了一個樣式規則,它將應用于所有的 <rect> 元素。樣式規則中包含了邊框顏色、寬度和填充。在 <rect> 元素中,我們不再需要指定樣式了。
SVG 中可以用 CSS 來控制元素的樣式,這樣可以使得我們在樣式表中設置多個元素的樣式,同時還可以方便地進行樣式的修改和維護。