svg中的fill-rule

最新推荐文章于 2024-01-27 16:20:11 发布
最新推荐文章于 2024-01-27 16:20:11 发布
阅读量1.1k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40863414/article/details/81807657
版权

在svg中填充一个路径的时候，有一个填充规则属性:fill-rule，这个属性有两个选项，一个是nonzero（默认),一个是evenodd，关于这两个值的解释，官方文档讲解的十分抽象，很多解释文档也只是跟风，把这两个值讲的神乎其神的，以至于我好长时间都搞不懂这两个到底是干什么的，想要了解具体的请参见我的博客，里面具体描述了我对这两个值的理解。

文章地址：
svg中的fill-rule

秋天爱美丽
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
SVG 字体 – fill 填充（19）
https://shixuebin.gitee.io/hexo-blog/
01-31 71
fill 形状填充颜色。
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { ... modules : [ 'nuxt-svg-sprite-loader' ] } 在页面中使用SVG： < template> < svg >< use xss=removed></ use></ svg > </ template> < script > import Logo from ' @/
svg画五角星，关于fill-rule的理解
mishiwjp的博客
12-06 7874
先上代码   画出来是这样的 把fill-rule改成evenodd后，是这样的 先看看官方文档里面fill-rule两个属性的解释， nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0
svg 属性详解：填充与边框
笔记
01-27 1338
填充与边框属性详解
iOS CAShaperLayer 层详解
jeffasd的专栏
03-07 1114
http://blog.chinaunix.net/uid-29345848-id-5671145.html nonzero字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图
svg中fill-rule属性解析
热门推荐
大白兔
06-06 1万+
fill-rule属性规定了svg图形的填充规则 fill-rule 有效值 nonzero / evenodd / inherit 默认值 nonzero 应用于 shape形状类元素和文字内容类元素 可继承 是 比例 无 媒体 可见 动画可用 是 fill-rule属性用于指定使用哪一种短发去判断画布上的某区域是否属于该图形的“内部
理解SVG的图形填充规则
无心的专栏
08-09 1万+
本文内容翻译自W3.org网站的SVG规范，作为自己的备忘，供SVG初学者参考。 原文网址： SVG fill-rule property in SVG 1.1 (Second Edition) SVG的图形填充规则通过fill-rule属性来指定。 ‘fill-rule’ 有效值:   nonzero | evenodd | inherit 默认值:
php图形填充颜色,SVG基础|SVG图形填充颜色
weixin_39792472的博客
03-10 309
SVG的填充是指在图形的描边内部填充指定的颜色。通过fill SVG CSS属性，我们可以为任何SVG图形填充颜色。填充颜色示例SVG的填充颜色是将颜色填充到SVG图形描边的里面。下面是一个例子：style="stroke: none; fill: #0000ff;" />这个例子定义了一个填充色为蓝色的圆形，它没有描边。得到的结果如下：填充和描边你可以结合使用SVG的填充和描边，下面是一个...
java svgshape_SVG 多边形
weixin_33771816的博客
02-26 234
SVG的图形填充规则通过fill-rule属性来指定。fill-rule有效值:nonzero | evenodd |inherit默认值:nonzero可继承:是比例:无媒体:可见fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充)。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个...
SVG 详解（三）基础语法
青岑的博客
04-19 6904
本文介绍一些 SVG 的简单语法，如矩形、圆形、路径等。 文文涉及的全部示例 =&gt; 在这里 rect-矩形 // 语法很简单，x y 左上角起点坐标，width height 矩形长宽，rx ry 圆角 // 绘图的填充等属性可以放在 style 里，也可以和 style 平级抽离为一个属性去描述，如这样：fill='red' &lt;svg width="200" height=...
VUE-cli3使用 svg-sprite-loader
12-11
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。 使用 svg-sprite 的好处 页面代码清爽 可使用 ID 随处重复调用 每个 ...
svg-pan-zoom.js
10-28
viewportSelector: '.svg-pan-zoom_viewport' , panEnabled: true , controlIconsEnabled: false , zoomEnabled: true , dblClickZoomEnabled: true , mouseWheelZoomEnabled: true , preventMouseEventsDefault: ...
vue-svg-icon-loader:将SVG文件转换为VueJS组件
05-17
您可以导入这些文件，然后直接在您的Vue应用程序中使用它们： < template> < div> < my width = ' 1.5em ' height = ' 1.5em '> </ div></ template>< script >import MyIcon from ' ./my-icon.svg 'export ...
svg-pan-zoom-master.rar
03-19
javascript操作svg，支持滚轮放大缩小，鼠标拖动，有多个demo演示
实验-三、数据库安全性(目的、要求和模板).doc
04-24
实验-三、数据库安全性(目的、要求和模板).doc
基于Docker搭建K8s集群离线包
04-24
基于Docker搭建K8s集群离线包，包含部署时所需的全部文件，可在内网环境中使用，K8s为1.23.0版本，docker为20.10.9-3版本
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip
最新发布
04-24
基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ 基于springboot+vue实现的求职招聘类型网站源代码+数据库（优质毕设项目）.zip个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！基于springboot+vue实现的求
基于Android系统Api封装常用工具类.zip
04-24
基于Android系统Api封装常用工具类.zip
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 142.672L148.817 142.672L106.718 0C83.1045 6.98883 61.3691 19.7882 43.641 37.5163C15.7461 65.4112 0.0538676 103.228 0 142.672Z" fill="#08260B" fill-opacity="0.2" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M46 142.672L148.817 142.672L119.737 44.1196C103.427 48.9531 88.4141 57.7972 76.1678 70.0435C56.8996 89.3117 46.0538 115.428 46 142.672Z" fill="#08260B" fill-opacity="0.25"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M91 142.672L148.817 142.672L132.472 87.2803C123.307 90.0052 114.871 94.9799 107.987 101.863C97.1584 112.693 91.0537 127.363 91 142.672Z" fill="#08260B" fill-opacity="0.3"/>
06-01
这是三个 SVG path 元素，每个元素都有不同的路径形状和填充颜色。 第一个 path 元素的路径形状是一个三角形，起点为 (0,142.672)，终点为 (148.817,142.672)，控制点为 (106.718,0) 和 (43.641,37.5163)。填充颜色为 #08260B，填充透明度为 0.2。 第二个 path 元素的路径形状是一个不规则图形，起点为 (46,142.672)，终点为 (148.817,142.672)，控制点为 (119.737,44.1196) 和 (76.1678,70.0435)。填充颜色为 #08260B，填充透明度为 0.25。 第三个 path 元素的路径形状是一个不规则图形，起点为 (91,142.672)，终点为 (148.817,142.672)，控制点为 (132.472,87.2803) 和 (107.987,101.863)。填充颜色为 #08260B，填充透明度为 0.3。 这些路径形状可以通过 SVG 编辑器或手动编写 SVG 路径字符串来创建。填充颜色和透明度可以通过设置 path 元素的 fill 和 fill-opacity 属性来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值