SVG 媒体属性

SVG 是一种基于 XML 的矢量图形格式，常用于制作图标、线条图和复杂的数据可视化。与位图不同，SVG 图像的大小和细节不会因放大和缩小而失真，同时也支持交互和动画效果。

媒体属性是 SVG 中用于定义图像长宽比例、缩放、填充、背景色等属性的一组属性。以下是一些常用的 SVG 媒体属性：

width 和 height

用于定义 SVG 图像的宽度和高度。这些属性可以用像素、百分比或其他单位来定义。如果不指定任何单位，则默认为像素。

<svg width="200" height="100">
  <rect x="50" y="20" width="100" height="60" fill="#007FFF" />
</svg>

viewBox

用于指定 SVG 坐标系中的可见区域。它的值是一个四元组，分别表示 x、y、宽度和高度。这个属性可以让 SVG 图像自动缩放以适应父容器的大小。

<svg viewBox="0 0 100 100" style="width: 50%; height: auto;">
  <rect x="10" y="20" width="30" height="50" fill="#007FFF" />
  <circle cx="60" cy="50" r="20" fill="#FFAA00" />
</svg>

preserveAspectRatio

用于指定 SVG 图像如何适应视口（也就是浏览器窗口或其他容器）。它的值可以是以下两种之一：

• none：不维持长宽比例，直接拉伸或缩放图像以适应视口。
• xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax：维持长宽比例，但可以指定对齐方式（例如左上角、中心、右下角等）。

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 50%; height: auto;">
  <rect x="10" y="20" width="30" height="50" fill="#007FFF" />
  <circle cx="60" cy="50" r="20" fill="#FFAA00" />
</svg>

fill 和 stroke

用于指定 SVG 图形的填充和描边颜色。它们的值可以是颜色名称、十六进制值、RGB 值等等。

<svg width="200" height="100">
  <rect x="50" y="20" width="100" height="60" fill="#007FFF" stroke="#000000" stroke-width="2" />
</svg>

更多的 SVG 媒体属性可以参考 MDN 文档。