一、SVG属性CSS
CSS属性在SVG文档中具有与HTML类似的作用。可以在<style>标签或SVG元素的style属性中定义CSS样式。
SVG元素的CSS属性可用于定义元素的呈现方式，如图形的填充和轮廓。
例如：
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80"
style="fill:red; stroke:black; stroke-width:2px;" />
</svg>
上述代码定义了一个100x100的SVG画布，其中绘制了一个尺寸为80x80，x、y坐标为10的矩形，颜色为红色，边框为黑色，宽度为2个像素。样式属性中的各个CSS属性可分别调整图形的填充、边框颜色、线宽等各种效果。
二、SVG属性去除等比例
通常情况下，SVG元素的大小会被默认拉伸或压缩为与画布等比例。如果需要将其拉伸或压缩为不等比例，则需要使用viewBox属性。
viewBox属性定义了一个在SVG单元坐标系中的矩形区域，它会被视为一个可见区域。在SVG中，所有路径、图形、文本都是在单元坐标系中绘制的，然后根据viewBox属性的定义进行缩放、平移等变换，以适应实际显示的大小。
例如：
<svg width="200" height="200" viewBox="0 0 100 50">
<rect x="10" y="10" width="80" height="30"
style="fill:red; stroke:black; stroke-width:2px;" />
</svg>
上述代码中，viewBox属性的值为“0 0 100 50”，表示坐标系中左上角为(0, 0)，宽为100，高为50的矩形区域。虽然画布大小为200x200，但是由于viewBox的定义，矩形实际上被缩放至画布的一半大小。
三、SVG属性viewBox
在上一节中我们已经学习了viewBox属性的作用，实际上，它在SVG中是非常重要的一个属性。
viewBox可以帮助开发者更好地理解SVG，了解如何利用单元坐标系中的图形绘制出我们想要的效果，并通过缩放、平移等变换展现出来。
例如：
<svg width="200" height="200" viewBox="0 0 1000 500">
<line x1="0" y1="0" x2="1000" y2="500" stroke="red" stroke-width="5" />
<line x1="0" y1="500" x2="1000" y2="0" stroke="blue" stroke-width="5" />
</svg>
上述代码绘制了一个斜叉线条，红色部分上半部分，蓝色下半部分，但是其实线条的实际绘制只有两条直线，通过viewBox的缩放和平移变换摆放到正确的位置和角度。
四、SVG属性有transform吗
transform属性定义了一个基于属性值所指定的平移、缩放、旋转等变换的转换矩阵，可以用于对SVG的任何元素进行变换。
transform属性可以包括多个值，每个值都以空格分隔，表示要应用的某种变换类型和参数，具体取决于各个变换函数的要求。
例如：
<svg width="200" height="200">
<rect x="10" y="10" width="50" height="50"
transform="rotate(45 35 35)" />
</svg>
上述代码定义了一个矩形，rotate函数通过调节旋转角度和旋转中心，实现对其旋转变换。
五、SVG属性
SVG元素中的属性包括基本的XML属性，如ID、class、style和XML Namespace等。
有一些特定的SVG属性也可以用于控制元素的外观或行为。
例如，fill和stroke属性用于指定元素的填充色和描边色。
六、SVG path属性
SVG路径属性用于定义形状和线条。它被用于<path>元素，其中的属性d描述了路径的形状。
路径的d属性值通常是一系列字符，其中包括各种线条和曲线段的命令。这些命令可以用来定义路径的起点、终点、伸展方式以及绘制线和曲线的方式。
例如：
<svg width="100" height="100">
<path d="M10,10 L90,90" stroke="black" stroke-width="2" />
</svg>
上述代码中的d属性值是"M10,10 L90,90"，表示先移动到坐标(10, 10)，然后绘制一条直线到坐标(90, 90)。stroke和stroke-width属性用于设置线条颜色和宽度。
七、SVG fill属性
fill属性指定了SVG元素的填充色，可以应用于矩形、圆形、椭圆、路径等各种形状。
fill属性可使用不同的值，如纯色值、渐变值、图案值等。
例如：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
<radialGradient id="grad1">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</svg>
上述代码中的fill属性值是“url(#grad1)”表示使用了ID为grad1的径向渐变样式。
八、SVG标签属性
SVG标签属性用于定义SVG元素的各种属性，如id、class、style等。
以<rect>元素为例，其属性包括x、y、width、height、rx、ry、style等。
例如：
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="50"
style="fill:red; stroke:black; stroke-width:2px;" />
</svg>
上述代码定义一个尺寸为80x50的红色矩形，黑色描边，2像素宽。
九、SVG标签常用属性选取
常用的SVG元素有<rect>、<circle>、<line>、<text>、<polygon>等。
常用的SVG属性包括：fill、stroke、stroke-width、width、height、x、y、id等。
例如：
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="2"
fill="yellow" />
</svg>
上述代码定义了一个半径为80的黄色圆形，黑色描边，2像素宽。
