22 lines
1.2 KiB
Plaintext
22 lines
1.2 KiB
Plaintext
---
|
||
title: 你熟悉 SVG 的样式设置吗？
|
||
---
|
||
|
||
有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。 您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。
|
||
|
||
可以通过在节点上设置两个属性来完成基本着色：`fill` 和 `stroke`。 `fill` 设置对象内部的颜色，`stroke` 设置绘制在对象周围的线条的颜色。 您可以使用在 HTML 中使用的相同 CSS 颜色命名方案，无论是颜色名称（即 `red`）、RGB 值（即 `rgb(255,0,0)`）、十六进制值、RGBA 值等。
|
||
|
||
```html
|
||
<rect
|
||
x="10"
|
||
y="10"
|
||
width="100"
|
||
height="100"
|
||
stroke="blue"
|
||
fill="purple"
|
||
fill-opacity="0.5"
|
||
stroke-opacity="0.8" />
|
||
```
|
||
|
||
上面的 `fill="purple"` 是*表现属性*的一个例子。 有趣的是，与 `style="fill: purple"` 这样的内联样式（它也恰好是一个属性）不同，表现属性可以被样式表中定义的 [CSS 样式覆盖](https://css-tricks.com/presentation-attributes-vs-inline-styles/)。 因此，如果您执行类似 `svg { fill: blue; }` 的操作，它将覆盖已定义的紫色填充。
|