SVG font-size 属性

SVG（Scalable Vector Graphics）是一种基于XML语法的矢量图形格式，支持互动和动画效果。在SVG中，字体大小的控制使用font-size属性实现。

语法

font-size属性可应用于任何支持文本标签的元素，如<text>、<tspan>、<textPath>、<switch>和<a>等。语法如下：

<element font-size="size">

其中，size指示所需的字体大小，可以是像素、百分比或长度单位。

像素值

当您指定数字值时，font-size属性将该值解释为像素值。像素是网页上测量线的基本单位，指的是屏幕上的一个小点。

<svg width="300" height="100" font-size="24">
    <text x="0" y="50">Hello World!</text>
</svg>

在上面的例子中，font-size被设置为24，所以文本的大小为24像素。

百分比值

除了指定像素值，您还可以使用相对值——百分比值。百分比是相对于包含文本的元素（例如<text>元素）的字体大小而言的。

<svg width="300" height="100" font-size="150%">
    <text x="0" y="50">Hello World!</text>
</svg>

在上面的例子中，font-size被设置为150%，所以文本的大小将是包含元素的1.5倍（即字体大小）。

长度单位值

除了使用像素和百分比，您还可以使用其他的长度单位。SVG支持许多长度单位，包括px、em、rem、pt、pc、cm、mm和in。最常用的单位是px。

<svg width="300" height="100" font-size="2em">
    <text x="0" y="50">Hello World!</text>
</svg>

在上面的例子中，font-size被设置为2em，所以文本的大小将是包含元素字体大小的两倍。

简写属性

font-size属性是CSS属性之一，可以使用CSS样式表设置SVG元素的font-size属性值。CSS font-size属性还可以与其他CSS字体属性结合使用，如font-family、font-weight和font-style等。

<style>
    .title {
        font-size: 24px;
        font-weight: bold;
        font-family: sans-serif;
        fill: blue;
    }
</style>

<svg width="300" height="100">
    <text x="0" y="50" class="title">Hello World!</text>
</svg>

在上面的例子中，我们使用CSS样式表设置font-size属性、font-weight属性、font-family属性和fill属性。最终的文本大小是24像素，颜色为蓝色，并采用sans-serif字体。

以上就是SVG font-size属性的介绍。希望对您有所帮助！