svg 属性详解：填充与边框

已于 2024-01-27 16:25:48 修改
阅读量2.8k 收藏 22
点赞数 16
分类专栏： svg 文章标签： 前端 svg
于 2024-01-27 16:20:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenrui7868/article/details/135656766
版权

svg 属性详解：填充与边框

1 颜色和透明度

颜色和透明度

图像都有颜色，svg 中可以使用属性 fill 和 stroke 来修改图形的颜色。fill 属性设置对象的内部颜色，stroke 属性设置绘制对象的线条的颜色。
颜色的取值可以参考 HTML 中 CSS 颜色命名方案，包括颜色名（比如“blue”），rgb 值（比如 rgb(0,0,255))、十六进制（比如 #0000FF) 等，参考 Colors Home 中颜色的定义。
透明度是另一个常见的图像属性， svg 中可以使用 opacity 属性来控制整个图像的透明度，也可以通过 fill-opacity 和 stroke-opacity 来分别定义填充色和边框的透明度。

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">

<g stroke-width="5"> 
    <rect x="70" y="95" width="80" height="90" 
        fill="#FF0000" stroke="#00008B" />
    <rect x="125" y="145" width="100" height="80"
        fill="Gold" fill-opacity="0.8" stroke="Lavender" />
    <rect x="80" y="45" width="140" height="60"
        fill="rgb(255,102,255)" stroke="rgb(0,0,255)" 
        stroke-opacity="0.4" />
    <rect x="20" y="150" width="75" height="60"
        fill="Purple" stroke="DeepPink" opacity="0.5"/>
</g>

</svg>

上面的代码分别绘制了下面四个矩形，设置边框宽度为 4 以便查看边框透明效果：
在这里插入图片描述

2 填充规则 fill-rule

对于一个简单的、没有交错的路径来说，判断它的内部区域是很容易的。但是一些复杂的路径，比如与自身相交的路径，或者路径的其中一段包围着另一段，要判断它的内部区域，就没那么容易了。
fill-rule 是一个表现属性，用来定义一个多边形内部区域的算法。该属性为如何确定一个图形的内部提供了两个可选值：
fill-rule
下面图示也许更浅显易懂，箭头显示路径的方向：
fill-rule 图形解释
如何为图形设置 fill-rule 属性，这里给出一个例子，绘制上面图示 A 组的两个五角星：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M 100 20 L 129.39 110.45 L 52.45 54.55
        L 147.55 54.55 L 70.61 110.45 Z"
        fill="Red" stroke="Black" />
<g transform="translate(150,0)">
    <path d="M 100 20 L 129.39 110.45 L 52.45 54.55
            L 147.55 54.55 L 70.61 110.45 Z"
            fill="Red" fill-rule="evenodd" stroke="Black"/>
</g>

</svg>

3 边框样式

边框除了有颜色属性，还有几何属性，参考下面的表格：
stroke 相关属性

3.1 stroke-width

stroke-width 用来定义边框的宽度，注意，边框的宽度是以路径为中心向两边伸展的，可以参考下面的例子：

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="85" cy="85" r="50" fill="Red"
    stroke="Blue" stroke-opacity="0.5" stroke-width="20"/>

</svg>

这里设置了边框不透明度为 stroke-opacity=20，可以清楚得看到边框是如何绘制的：
在这里插入图片描述

3.2 stroke-linecap

stroke-linecap 用于控制边框终点的形状。

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect width="180" height="170" fill="none" stroke-dasharray="3,3" stroke="black" />
<g stroke-width="20" stroke="Darkgray">
    <line x1="40" y1="40" x2="140" y2="40" stroke-linecap="butt" />
    <line x1="40" y1="80" x2="140" y2="80" stroke-linecap="square"/>
    <line x1="40" y1="120" x2="140" y2="120" stroke-linecap="round"/>
</g>

<g stroke="Black">
    <line x1="40" y1="40" x2="140" y2="40" />
    <line x1="40" y1="80" x2="140" y2="80" />
    <line x1="40" y1="120" x2="140" y2="120" />
</g>

</svg>

为了方便看清效果，这里画出了没有设置 stroke-linecap 属性的线段（中间的黑色线条）：

butt 是默认的效果，用直边来结束线段，线段边界 90 度垂直于描边的方向。square 和 butt 的效果差不多，只是两端会稍微超出实际路径的范围，超出的大小取决于 stroke-width。round 用于绘制圆角，圆角的半径也是取决于 stroke-width。

3.3 stroke-linejoin

stroke-linejoin 用于表达两段路径之间用什么方式来连接。

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">

<g stroke-width="16" stroke="Darkgray" fill="none">
    <path d="M 20 60 L 100 60 A 40 40 0 0 0 180 60" stroke-linejoin="miter" />
    <path d="M 20 160 L 100 160 A 40 40 0 0 0 180 160" stroke-linejoin="round"/>
    <path d="M 20 260 L 100 260 A 40 40 0 0 0 180 260" stroke-linejoin="bevel"/>
    <rect x="260" y="40" width="100" height="70" stroke-linejoin="miter" />
    <rect x="260" y="140" width="100" height="70" stroke-linejoin="round" />
    <rect x="260" y="240" width="100" height="70" stroke-linejoin="bevel" />
</g>

<g stroke="Black" fill="none">
    <path d="M 20 60 L 100 60 A 40 40 0 0 0 180 60" />
    <path d="M 20 160 L 100 160 A 40 40 0 0 0 180 160" />
    <path d="M 20 260 L 100 260 A 40 40 0 0 0 180 260" />
    <rect x="260" y="40" width="100" height="70" />
    <rect x="260" y="140" width="100" height="70" />
    <rect x="260" y="240" width="100" height="70" />
</g>

</svg>

在不显式指定 stroke-linejoin 的值时，默认使用 miter。miter 表示用方向笔在连接处形成尖角，round 表示用圆角连接，实现平滑效果。bevel 会在连接处形成一个斜接。需要注意的是，stroke-linejoin 不仅可以用于path，也可以用于 rect 元素。

与 stroke-linejoin 相关的还有 stroke-miterlimit 属性，我们已经知道，miter 会在路径的连接处形成一个尖角，尖角的样式取决于 stroke-width 和两路径的夹角。
stroke-miterlimit
参考下面图示：
斜接和夹角
事实上，没有显式指定 stroke-miterlimit 的情况下，在 stroke-linejoin=“miter” 时，默认 stroke-miterlimit=4，如果需要在任意情况下保留斜接，可以给 stroke-miterlimit 赋一个很大的值。
关于如何设置斜接限制，这里给了一个例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="275" height="200" 
    fill="none" stroke-dasharray="3,3" stroke="black" />
<path d="M 40 40 L 20 100 H 100 A 50 50 30 0 0 85 163.3" 
    fill="none" stroke-width="10" stroke="DimGray" 
    stroke-linejoin="miter" stroke-miterlimit="2" />
<rect x="170" y="40" width="80" height="100"
    fill="none" stroke-width="10" stroke="DimGray" 
    stroke-linejoin="miter" stroke-miterlimit="1" />

</svg>

上面的代码绘制了如下两个图形，可以看到，同一个 path 的多个路径连接处，storke-miterlimit 只对符合限制条件的斜接转换为斜角。stroke-miterlimit 也同样适用于 rect 元素。

3.4 stroke-dasharray

stroke-dasharray 用于将虚线类型应用与边框上。通过用一组以逗号分隔的数字来定义虚线的样式（注意与 path 的 d 属性进行区分，path 中 d 的参数用空格来进行区分）。每一组数字，第一个数字用来表示填色区域的长度，第二个用来表示非填色区域的长度，若还有其他数字，则跟前两个数字代表的含义一致。参考下面一个简单的例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="20" y1="50" x2="220" y2="50" 
    stroke-dasharray="40,20" stroke="Pink"
    stroke-width="10" />

<line x1="20" y1="50" x2="220" y2="50" stroke="Black" />
</svg>

上面的代码在同一位置上绘制了两条线，其中一条设置了虚线样式，下面图示展示了虚线是如何应用到图形上：
设置虚线样式
注意虚线最后一段填充区域，因为图形在这里绘制完毕，所以最后一段只有20。
使用 stroke-dashoffset 可以自定义虚线开始的位置，参考下面的例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M 40 60 L 180 60 L 250 70" 
        stroke-dashoffset="15" stroke-dasharray="40,25" 
        stroke="Red" stroke-width="4" fill="none" />
<path d="M 40 60 L 180 60 L 250 70" 
        stroke="Black" fill="none" />
<path d="M 40 60 h 50" stroke-width="10" 
        stroke="Green" opacity="0.3" />

<path d="M 40 180 L 180 180 L 250 190"
        stroke-dashoffset="95" stroke-dasharray="40,25"
        stroke="Red" stroke-width="4" fill="none" />
<path d="M 40 180 L 180 180 L 250 190"
        stroke="Black" fill="none" />
<path d="M 40 180 h 35" stroke-width="10"
        stroke="Green" opacity="0.3" /

</svg>

下面图示展示 strokke-dashoffset 是如何应用的：
在这里插入图片描述

禾达达
关注
  • 16
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG 字体 – fill 填充（19）
https://shixuebin.gitee.io/hexo-blog/
01-31 148
fill 形状填充颜色。
如何用SVG画一个特定边框
m0_38012434的博客
02-27 59
这时候缺点已经来了，我们通过加背景色遮盖边框实现边框相连，不可避免地遮盖了页面内容，如果页面背景比较复杂，我们会很难处理。给 tab元素 设置border-right: none，同时border-top-right-radius: 0、border-bottom-right-radius: 0。元素2 设置border-bottom-right-radius: 50%，同时border和tab元素保持一致。其实和问题一一样，我们又使用了背景色对边框进行遮盖，但先忍了，实现要紧。圆角如何平滑过渡到直线。
html svg填充图片,SVG进阶 | SVG填充模式
weixin_30697511的博客
06-05 1039
SVG填充模式是指使用某种图像作为模式来填充SVG图形。这种模式可以是SVG图形或位图。其实SVG填充模式所做的事情就是使用某种图案反复的填充整个SVG图形，就像PhotoShop中的“图案图章工具”所做的那样。填充模式的例子下面是一个简单的SVG填充模式的例子：x="10" y="10" width="20" height="20"patternUnits="userSpaceOnUse" &g...
SVG 静态文件使用 ,以及如何简单修改SVG 常见样式(填充颜色、描边等)。
最新发布
youyudehan的博客
05-31 1371
简单封装 SVG 组件，在页面通过该组件展示SVG 图形，避免SVG内容过多，导致页面不美观，同时简单修改svg 样式，提供 hover 、点击等方法对SVG样式修改思路。
SVG入门-填充和边框
natsu-cc的博客
03-22 2255
前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。 Fill 和 Stroke 属性 要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。 <rect x="10" y="
svg fill css变量
weixin_36878452的博客
05-29 179
【代码】svg fill css变量。
学习SVG（七）图案和渐变填充
小小的前端
07-21 1488
在SVG中图形的填充和轮廓除了使用纯色，还可以使用图案和渐变。
svg-fill：以单一颜色填充SVG的所有形状
02-15
SVG填充 用单色填充所有形状的SVG。 :warning: 当前使用简单的解决方案，该解决方案只是将具有所选填充颜色的填充属性添加到SVG元素。 对于没有样式属性的SVG（例如要组合成符号精灵的属性），这应该可以正常工作。 对于其他任何事情，结果都会是命中注定的。 用法 要求 Node.js> = 10 安装 npm install --save svg-fill API 简单用法： const SvgFill = require ( 'svg-fill' ) ; // Instantiante SvgFill with your chosen fill // color: const svgFill = new SvgFill ( '#FF0000' ) ; // SvgFill expects SVG data as a string or Buffer const originalSvgD
SVG之旅：填充特性
W3cplus
01-04 1601
通过前面的学习，你可以用你掌握的知识来绘制任何图形，接下来的目标是给绘制的图形着色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色，我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中，我们常能看到的fill属性，
SVG标准解读-几何图形-图案填充-核心要点
插件开发
04-14 3996
文章目录1.SVG概述2.svg标签2.1.视图(viewport)和单位2.2.坐标系统2.3.viewBox3.g标签4.公共属性5.几何图形5.1 绘制直线5.2 绘制矩形5.3 绘制椭圆5.4 绘制圆5.5 多边形5.6 折线5.7 路径5.7.1 M指令和L指令5.7.2 H指令和V指令5.7.3 Q指令5.7.4 C指令5.7.5 T指令5.7.6 S指令5.7.7 A指令 1.SVG概述 SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢
CSS3 SVG文字填充动画特效特效代码
03-20
**CSS3 SVG文字填充动画特效详解** 在网页设计中，动态效果往往能为用户体验增色不少，CSS3 SVG文字填充动画特效就是其中一种创新且吸引眼球的技术。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形语言，...
css中pointer-events属性详解
12-13
这个属性尤其在处理绝对定位元素时显得尤为重要，因为这些元素可能会覆盖其他元素，导致用户无法与底层元素进行交互。`pointer-events`属性最早由SVG规范引入，后来被引入到CSS，并得到了现代浏览器（如Firefox 3.6+...
css3 svg文字轮廓边框特效.zip
10-09
《CSS3与SVG结合实现文字轮廓边框特效详解》 在网页设计中，吸引用户的注意力并提供优秀的用户体验是至关重要的。CSS3与SVG（可缩放矢量图形）的结合，为实现这样的目标提供了强大的工具。本文将深入探讨如何利用...
CSS3 SVG网页加载图标动画特效
06-24
**SVG详解** SVG是一种基于XML的矢量图形格式，它可以无限缩放而不失真，非常适合用于网页图标和图形。SVG的优势在于： 1. **清晰度**：无论放大多少倍，SVG图形都能保持清晰，这对于高分辨率屏幕尤其重要。 2. *...
CSS3 SVG信用卡结算动画特效
06-24
- **填充和描边**：SVG的`fill`和`stroke`属性可以设置图形内部的颜色和边框颜色，从而达到理想的设计效果。 - **透明度和混合模式**：SVG的`opacity`和`mix-blend-mode`属性可以创建丰富的视觉层次感，使得信用卡...
svg中的fill-rule
weixin_40863414的博客
08-18 1300
在svg中填充一个路径的时候，有一个填充规则属性:fill-rule，这个属性有两个选项，一个是nonzero（默认),一个是evenodd，关于这两个值的解释，官方文档讲解的十分抽象，很多解释文档也只是跟风，把这两个值讲的神乎其神的，以至于我好长时间都搞不懂这两个到底是干什么的，想要了解具体的请参见我的博客，里面具体描述了我对这两个值的理解。 文章地址： svg中的fill-rule...
SVG 边框（stroke）
司马懿的西山居
11-27 8712
<stroke>属性介绍 stroke 边框（轮廓）颜色 stroke-width 边框（轮廓）厚度 stroke-linecap 开放路径的终结样式（或称为画笔线帽） butt 无线帽 round 圆形的线帽 square 方形的线帽 stroke-dasharray 定义一实线虚线长度数组，不断重复该样式 strokestroke指的是边框（轮廓）的颜色<svg xmlns="http://w
svg中fill-rule属性解析
热门推荐
大白兔
06-06 1万+
fill-rule属性规定了svg图形的填充规则 fill-rule 有效值 nonzero / evenodd / inherit 默认值 nonzero 应用于 shape形状类元素和文字内容类元素 可继承 是 比例 无 媒体 可见 动画可用 是 fill-rule属性用于指定使用哪一种短发去判断画布上的某区域是否属于该图形的“内部
svg图片 填充颜色
liuyuqin1991的专栏
03-11 5640
需求 一张全灰色的svg图片，根据所占的百分比用蓝色填充 方法 1. svg蒙版 + 背景渐变（控制渐变函数中间的百分比即可达到效果） mask-image: url(mask.svg); mask-size: 100% 100%; -webkit-mask-image: url(mask.svg); -webkit-mask-size: 100% 100%; background: -webk...
详解SVG alignment-baseline属性
07-09
SVG的alignment-baseline属性用于定位SVG元素内部的文本或图形元素的垂直对齐方式。它定义了基线（baseline）相对于元素的垂直位置。 alignment-baseline属性可以应用于所有可定位的SVG元素，包括文本元素（<text>、<tspan>等）和图形元素（<rect>、<circle>等）。 alignment-baseline属性有以下几个可选值： 1. auto：表示使用默认的对齐方式。对于文本元素，默认值是baseline，对于图形元素，默认值是中心对齐。 2. baseline：将元素的基线与父元素的基线对齐。这是默认对齐方式，使得文本元素的基线沿着父元素的底部对齐。 3. before-edge：将元素的顶部与父元素的前沿对齐。前沿是指基线之上的最高点。 4. text-before-edge：将元素的顶部与父元素的文本前沿对齐。文本前沿是指文本行之上的最高点。 5. middle：将元素的中心与父元素的中心对齐。 6. central：将元素的中心与父元素的中心对齐。与middle相同，只是为了保持与CSS的一致性。 7. after-edge：将元素的底部与父元素的后沿对齐。后沿是指基线之下的最低点。 8. text-after-edge：将元素的底部与父元素的文本后沿对齐。文本后沿是指文本行之下的最低点。 9. ideographic：与baseline对齐，但基线的位置略有不同。在某些字体中，ideographic与baseline对齐可以更好地呈现东亚文字。 10. alphabetic：与baseline对齐，但基线的位置略有不同。在某些字体中，alphabetic与baseline对齐可以更好地呈现拉丁文字。 这些值可以通过CSS样式或直接在SVG元素的属性中指定。通过调整alignment-baseline属性的值，可以精确控制SVG元素内部文本或图形元素的垂直对齐方式，以满足具体的设计需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值