SVG 提供丰富的样式属性,用于控制图形的外观,包括填充、描边、渐变、图案等。
设置形状内部填充颜色。
<rect fill="red"/>
<rect fill="#ff0000"/>
<rect fill="rgb(255,0,0)"/>
<rect fill="rgba(255,0,0,0.5)"/>设置填充透明度。
<rect fill="red" fill-opacity="0.5"/>定义填充规则。
<polygon points="..." fill-rule="evenodd"/>设置描边颜色。
<rect stroke="black"/>设置描边宽度。
<rect stroke="black" stroke-width="2"/>设置线条端点样式。
<line stroke-linecap="round"/>设置线条连接处样式。
<polygon stroke-linejoin="round"/>设置虚线模式。
<line stroke-dasharray="5,5"/><svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect fill="url(#grad1)"/>
</svg><svg>
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="yellow"/>
<stop offset="100%" stop-color="red"/>
</radialGradient>
</defs>
<circle fill="url(#grad2)"/>
</svg><svg>
<defs>
<pattern id="patt1" x="0" y="0" width="20" height="20">
<circle cx="10" cy="10" r="5" fill="blue"/>
</pattern>
</defs>
<rect fill="url(#patt1)"/>
</svg>设置整体透明度。
<rect opacity="0.5"/>分别设置填充和描边的透明度。
<rect fill="red" fill-opacity="0.5" stroke="black" stroke-opacity="0.7"/>SVG 支持 CSS 样式,可以使用内联样式、内部样式表或外部样式表。
<rect style="fill: red; stroke: black;"/><svg>
<style>
.my-rect {
fill: blue;
stroke: black;
}
</style>
<rect class="my-rect"/>
</svg>