在CSS中,我們可以使用stroke-width
屬性來(lái)控制SVG圖標(biāo)的粗細(xì)。stroke-width
屬性定義了SVG圖形輪廓的寬度,可以通過(guò)設(shè)置具體的數(shù)值來(lái)調(diào)整圖標(biāo)的粗細(xì)。
如果我們想要將一個(gè)SVG圖標(biāo)的粗細(xì)設(shè)置為2像素,我們可以這樣寫CSS代碼:
.svg-icon { stroke-width: 2; }
在上面的代碼中,.svg-icon
是SVG圖標(biāo)的類名,stroke-width
屬性用于設(shè)置SVG圖標(biāo)的粗細(xì),2
是具體的粗細(xì)數(shù)值。
需要注意的是,stroke-width
屬性的值可以是具體的數(shù)值,也可以是百分比,如果設(shè)置為百分比,那么粗細(xì)的數(shù)值將是元素寬度的百分比。stroke-width: 50%
表示圖標(biāo)的粗細(xì)將是元素寬度的50%。
我們還可以在SVG元素內(nèi)部使用<g>
元素來(lái)分組不同的圖形元素,并為每組元素分別設(shè)置不同的粗細(xì)。
<svg> <g stroke-width="2"> <circle cx="50" cy="50" r="40" /> <square width="100" height="100" /> </g> <g stroke-width="4"> <triangle points="50,50 100,50 75,75" /> </g> </svg>
在上面的代碼中,***組的圓形和正方形圖標(biāo)的粗細(xì)設(shè)置為2像素,第二組的三角形圖標(biāo)的粗細(xì)設(shè)置為4像素。