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>有一系列样式属性可用。但是，建议您使用内联样式表或外部样式表，因此我不会在此处详细介绍样式属性。
使用styleAttribute 和 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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg" xmlns:xlink="http:/ /www.w3.org/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 形状样式的最简单方法。
在形状中本地覆盖样式表
如果您在样式表中为形状设置了样式，则可以通过在想要为其添加新样式的形状内部本地设置新的样式属性来覆盖此样式。在形状内部本地设置的样式始终优先于在内部或外部样式表中定义的样式。
SVG CSS 属性
SVG 元素具有您可以设置的以下 CSS 属性。并非所有元素都具有所有这些 CSS 属性。因此，CSS 属性被拆分为针对不同元素的多个表。
形状 CSS 属性
path元素和其他形状元素的 CSS 属性：
<%-- --%>
| CSS 属性 | 描述 |
|---|---|
fill
|
设置形状的填充颜色。 |
fill-opacity
|
设置形状的填充不透明度。 |
fill-rule
|
设置形状的填充规则。 |
marker
|
设置沿此形状的线条（边缘）使用的标记。 |
marker-start
|
设置沿此形状的线条（边缘）使用的开始标记。 |
marker-mid
|
设置沿此形状的线条（边缘）使用的中间标记。 |
marker-end
|
设置沿此形状的线条（边缘）使用的结束标记。 |
stroke
|
设置用于绘制此形状轮廓的笔触（线条）颜色。 |
stroke-dasharray
|
设置用于绘制此形状轮廓的笔划（线）虚线。 |
stroke-dashoffset
|
设置用于绘制此形状轮廓的笔划（线）虚线偏移。 |
stroke-linecap
|
设置用于绘制此形状轮廓的笔触（线）线帽。有效值为round、butt和square。
|
stroke-miterlimit
|
设置用于绘制此形状轮廓的笔划（线）斜接限制。 |
stroke-opacity
|
设置用于绘制此形状轮廓的笔触（线条）不透明度。 |
stroke-width
|
设置用于绘制此形状轮廓的笔触（线）宽度。 |
text-rendering
|
设置用于绘制此形状轮廓的文本渲染。 |
文本 CSS 属性
text元素的 CSS 属性：
| CSS 属性 | 描述 |
|---|---|
alignment-baseline
|
设置文本的对齐方式与其x和y坐标。
|
baseline-shift
|
设置用于呈现文本的基线偏移。 |
dominant-baseline
|
设置主要基线。 |
glyph-orientation-horizontal
|
设置水平字形方向。 |
glyph-orientation-vertical
|
设置垂直字形方向。 |
kerning
|
设置渲染文本的字距（字距是字母间距）。 |
渐变 CSS 属性
SVG 渐变的 CSS 属性：
| CSS 属性 | 描述 |
|---|---|
stop-color
|
设置在渐变中使用的stop元素中使用的停止颜色。
|
stop-opacity
|
设置stop渐变中使用的元素中使用的停止不透明度。
|
SVG使用CSS层叠样式表相关推荐
- css:层叠样式表(全)
css:层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,解决了内容与表现分离的问题,通常存储在css文件中. 目录: css属性,继承,引用等 选择器 盒模 ...
- css层叠样式表（一）
今天研究了下css.这东东入门不算难.可是想写出好的样式就得有很深的功底了.按照老大给网址,12天学会网页设计.做下总结吧.css通过div(层)来定位,通过层的margin,padding,bord ...
- 第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析 第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
- css层叠样式表——css基础介绍
css层叠样式表第一天 css层叠样式表01 css层叠样式表第一天 css介绍 css语法 html标签全局属性 引入css样式的方式 知识点应用 css介绍 css是Cascading Style ...
- css层叠样式表、基本选择器
文章目录 系列文章目录 前言 一.css层叠样式表 1.css组成 2.css引入方式 3.文字样式 4.文本属性 二.选择器 1.基本选择器 2.最高样式引入 3.伪链接选择器 4.伪结构选择器 5 ...
- Css3学习日志 --css层叠样式表
学习目标: 掌握css层叠样式表基础教程 CSS语法.选择器.字体样式.边框.背景.图片格式详解 学习内容: css样式规则 基本语法: A{属性:值; 属性:值; } 1.选择器用于指定css样式作 ...
- CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- 4.CSS层叠样式表一
CSS层叠样式表 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1.CSS简介 CSS: ...
- javascript css(层叠样式表)
css层叠样式表(用来装饰网页界面) js代码操作css css代码 目录 css层叠样式表(用来装饰网页界面) js代码操作css css代码在style(样式)里面进行操作 案例 在style(样 ...
- HTML之CSS层叠样式表
一.CSS层叠样式表概述 CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件 ...
最新文章
- 《系统集成项目管理工程师》必背100个知识点-23整体变更控制流程
- html按键清空怎么写_html的空格代码怎么写？教你如何使用空格nbsp代码
- LINUX文件系统介绍
- 面向对象与基于对象 区别
- mysql提交事务_mysql事务的实现原理
- sql 如何查询上次的记录_学会SQL并不难，小白学习记录之五（多表查询）
- 算法面试题：均分纸牌
- awk grep sed cut学习
- 服务器系统蓝牙驱动怎么安装,win7蓝牙驱动安装教程
- 计算机考试vb试题英语成绩,计算机二级考试vb试题_vb试题及参考答案
- 10+ 张图来探究 Linux 内核，以及如何高效学习
- Python基础模块：图像处理模块@PIL(批量分类处理图片及添加水印)
- 【毕业设计_课程设计】蓝牙灯：支持一键设置情景模式、无极调光调色
- 以太坊质押时代到来，开发者机遇何在？
- kali2021 JDK配置与安装(独一无二的详细)
- tim拒绝远程连接服务器失败怎么办,腾讯tim怎么开启远程控制-腾讯tim开启远程控制的方法 - 河东软件园...
- OC 技术 原生地图(源码)
- python 编程4，和7 幸运数字
- 文件------概念、基本操作、打开文件的方式、按行读取文件内容、复制文件、文件/目录的常用管理操作、文本文件的编码格式、练习1-4
- Python-shogun安装问题