第一句子网 > SVG使用CSS层叠样式表

SVG使用CSS层叠样式表

时间：2023-01-20 00:20:51

相关推荐

SVG使用CSS层叠样式表

英文链接：SVG and CSS - Cascading Style Sheets

可以使用 CSS 设置 SVG 形状的样式。造型是为了改变形状的外观。这可以是笔触颜色和宽度、填充颜色、不透明度和形状的许多其他属性。

有 6 种方法可以为 SVG 图像中的形状设置样式。每一个都将在本文中介绍。在本文的末尾，您将找到可用于 SVG 的 CSS 属性列表。

本文假设您熟悉 CSS。如果你不是，我也有一个CSS 教程，它解释了 HTML 上下文中的 CSS（也使用了 CSS）。SVG 元素的 CSS 属性有时与 HTML 元素的 CSS 属性不同，但总体原则保持不变。

使用属性的 CSS 样式

是否可以使用特定的样式属性（如stroke和fill.下面是一个例子：

<span style="color:#000000"><span style="background-color:#f0f0f0"><circle stroke="#000000" fill="#00ff00" /></span></span>

有一系列样式属性可用。但是，建议您使用内联样式表或外部样式表，因此我不会在此处详细介绍样式属性。

使用`style`Attribute 和 CSS 属性

此方法不使用任何特定于样式的属性。相反，它只使用style属性并在其中指定 CSS 属性。如果需要直接在形状中嵌入样式，这种方法比特定属性更可取，因为您学习了 CSS 属性的名称。CSS 属性在内部或外部样式表中是相同的，因此像这样复制粘贴和学习更容易。

这是通过style属性和 CSS 属性设置笔触和填充的同一个圆圈：

<span style="color:#000000"><span style="background-color:#f0f0f0"><circle style="stroke: #000000; fill:#00ff00;" /></span></span>

使用内联样式表

可以在内联样式表中为您的形状定义样式，然后将所有这些样式自动应用于您的形状。下面是一个例子：

<span style="color:#000000"><span style="background-color:#f0f0f0"><svg xmlns="/2000/svg" xmlns:xlink="/1999/xlink"> <style type="text/css" > < ![CDATA[圆{笔画：#006600; 填充：#00cc00；} ]]> </style> <circle cx="40" cy="40" r="24"/> </svg></span></span>

注意圆元素的样式是如何在 <style> 元素中定义的。这与在 HTML 和 CSS 中的工作方式相同。

内部样式表在 Internet Explorer 7 和 Firefox 3.0.5 中都可以正常工作。

类属性

您可以使用class形状中的属性来选择该形状的样式，而不是将样式应用于某种类型的所有形状（例如所有圆形）。就像class在 HTML 元素中使用属性一样。

这是圆形的两种样式的示例 - 绿色和红色。这两种样式中的每<circle>一种都使用class属性应用于它们自己的-element：

<span style="color:#000000"><span style="background-color:#f0f0f0"><svg xmlns="/2000/svg" xmlns:xlink="/1999/xlink"> <style type="text/css" > < ![CDATA[ circle.myGreen { stroke: #006600; 填充：#00cc00；} circle.myRed {笔画：#660000; 填充：#cc0000；} ]]> </style> <circle class="myGreen" cx="40" cy="40" r="24"/> <circle class="myRed" cx="40" cy="100" r ="24"/> </svg></span></span>

请注意circle样式表中的选择器名称是如何以.myGreenand 为后缀的.myRed。现在<circle>-elements 可以使用class="myGreen"或来引用绿色或红色圆圈样式class="myRed"。

使用外部样式表

当您使用外部样式表时，样式表被放在一个单独的文件中并放在您的 Web 服务器上，就像使用用于 HTML 页面的外部 CSS 文件一样。此外，您需要在 SVG 文件中的 <svg> 元素之前进行以下声明：

<span style="color:#000000"><span style="background-color:#f0f0f0"><?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?> </span></span>

这个处理指令告诉 SVG 查看器使用 CSS 样式表找到文件“svg-stylesheet.css”。

以下是在 SVG 文件中使用声明的示例：

<span style="color:#000000"><span style="background-color:#f0f0f0"><?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?> <svg xmlns="/2000/svg" xmlns:xlink="http:/ //1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> </svg></span></span>

注意：外部 CSS 样式表在 Internet Explorer 7 中似乎可以正常工作，但在 Firefox 3.0.5 中则不然。

在 HTML 页面中使用样式表。

如果您将 SVG 图像嵌入 HTML 页面中，您还可以将 SVG 图像的样式表嵌入 HTML 页面中。下面是一个例子：

<span style="color:#000000"><span style="background-color:#f0f0f0"><html> <body> <style> </style> <svg> </svg> </body> </html></span></span>

要为 SVG 图像内的形状添加样式，只需在style元素内添加常规 CSS 属性。您可以使用通常用于 HTML 的相同 CSS 选择器来设置 SVG 元素的样式。这是一个 HTML 页面，其中一个circle元素通过HTML 页面中的 CSS 样式表设置样式：

<span style="color:#000000"><span style="background-color:#f0f0f0"><html> <body> <style> circle { stroke: #006600; 填充：#00cc00；} </style> <svg> <circle cx="40" cy="40" r="24" /> </svg> </body> </html></span></span>

如果您将 SVG 图像直接嵌入 HTML 页面，这可能是设置 SVG 形状样式的最简单方法。