svg基础(六)滤镜-图像,光照效果(漫反射,镜面反射),组合
1 feImage:图像滤镜
feImage
滤镜从外部来源取得图像数据,并提供像素数据作为输出(意味着如果外部来源是一个 SVG 图像,这个图像将被栅格化。)
1.1 用法:
<feImage x="" y="" width="" height="" externalResourcesRequired =""
preserveAspectRatio="" xlink:href=""/>
1.2 属性:
- x: 用户坐标系中定义x轴坐标
- y: 用户坐标系中定义y轴坐标
- width: foreignObject的宽度
- height: foreignObject的高度
- externalResourcesRequired: 当前文档中是否需要外部资源。默认值为false
- preserveAspectRatio: 指示具有提供给定纵横比的viewBox的元素如何必须适合具有不同纵横比的视口
- xlink:href: 定义对资源的引用
- crossorigin: 通知浏览器请求具有cross-origin权限的图像文件
2 feDiffuseLighting:漫反射
2.1 用法:
<feDiffuseLighting in="SourceGraphic"lighting-color=""surfaceScale=""diffuseConstant=""result="">
</feDiffuseLighting>
2.2 属性:
- 阿尔法乘积因子(surfaceScale)
- RGB乘积因子(diffuseConstant)
- 灯光颜色(lighting-color)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"><defs><filter id="diff-light" color-interpolate-filter="sRGB" x="0" y="0"><feDiffuseLighting in="SourceGraphic"lighting-color="orange"surfaceScale="1"diffuseConstant="0.5"result="diffuseOutput"><fePointLight x="100" y="100" z="20"/></feDiffuseLighting><feComposite in1="diffuseOutput" in2="SourceGraphic" operator="in" result="diffuseOutput"></feComposite><feBlend in1="diffuseOutput" in2="SourceGraphic" mode="screen"></feBlend></filter></defs><circle cx="100" cy="100" r="100" filter=url(#diff-light)></circle></svg>
3 feSpecularLighting:镜面反射
3.1 用法:
<feSpecularLighting in="SourceGraphic"lighting-color=""surfaceScale=""specularConstant=""specularExponent=""result="">
</feSpecularLighting>
3.2 属性:
- 阿尔法乘积因子(surfaceScale)
- specularConstant
- 灯光颜色(lighting-color)
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"><defs><filter id="spec-light" color-interpolate-filter="sRGB" x="0" y="0"><feSpecularLighting in="SourceGraphic"lighting-color="orange"surfaceScale="1"specularConstant="1"specularExponent="4"result="specOutput"><feDistantLight elevation="25" azimuth="0"/></feSpecularLighting><feComposite in1="specOutput" in2="SourceGraphic" operator="in" result="specOutput"></feComposite></filter></defs><circle cx="100" cy="100" r="100" filter=url(#spec-light)></circle></svg>
4 # feComposite:组合滤镜
该滤镜执行两个输入图像的智能像素组合,在图像空间中使用以下 Porter-Duff 合成操作之一:over、in、atop、xor。另外,还可以应用一个智能组件arithmetic
操作(结果被压到 [0,1]
范围内)。
该 arithmetic 操作对组合来自<feDiffuseLighting>
滤镜和来自<feSpecularLighting>
滤镜的输出以及组合纹理数据很有用
。如果选择了arithmetic
操作,每个结果像素都要经过下面的方程式的计算:
result = k1i1i2 + k2i1 + k3i2 + k4
在这里:
i1
和i2
标示了输入图像相应的像素通道值,分别映射到
in和
in2 (en-US)`。k1
、k2
、k3
和k4
标示了同名的属性值。
这里有一个例子可以参考:
<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Example feComposite - Examples of feComposite operations</title><desc>Four rows of six pairs of overlapping triangles depictingthe six different feComposite operators under differentopacity values and different clearing of the background.</desc><defs><desc>Define two sets of six filters for each of the six compositing operators.The first set wipes out the background image by flooding with opaque white.The second set does not wipe out the background, with the resultthat the background sometimes shines through and is other casesis blended into itself (i.e., "double-counting").</desc><filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="arithmeticFlood" filterUnits="objectBoundingBox"x="-5%" y="-5%" width="110%" height="110%"><feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/><feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/><feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge></filter><filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/></filter><filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/></filter><filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/></filter><filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/></filter><filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/></filter><filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"x="-5%" y="-5%" width="110%" height="110%"><feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/></filter><path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /><path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /><path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /><path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /><g id="TwoBlueTriangles"><use xlink:href="#Blue100"/><use xlink:href="#Blue50"/></g><g id="BlueTriangles"><use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/><use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/><use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/><use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/><use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/><use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/></g></defs><rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/><g font-family="Verdana" font-size="40" shape-rendering="crispEdges"><desc>Render the examples using the filters that draw on top ofan opaque white surface, thus obliterating the background.</desc><g enable-background="new"><text x="15" y="75">opacity 1.0</text><text x="15" y="115" font-size="27">(with feFlood)</text><text x="15" y="200">opacity 0.5</text><text x="15" y="240" font-size="27">(with feFlood)</text><use xlink:href="#BlueTriangles"/><g transform="translate(275,25)"><use xlink:href="#Red100" filter="url(#overFlood)" /><use xlink:href="#Red50" filter="url(#overFlood)" /><text x="5" y="275">over</text></g><g transform="translate(400,25)"><use xlink:href="#Red100" filter="url(#inFlood)" /><use xlink:href="#Red50" filter="url(#inFlood)" /><text x="35" y="275">in</text></g><g transform="translate(525,25)"><use xlink:href="#Red100" filter="url(#outFlood)" /><use xlink:href="#Red50" filter="url(#outFlood)" /><text x="15" y="275">out</text></g><g transform="translate(650,25)"><use xlink:href="#Red100" filter="url(#atopFlood)" /><use xlink:href="#Red50" filter="url(#atopFlood)" /><text x="10" y="275">atop</text></g><g transform="translate(775,25)"><use xlink:href="#Red100" filter="url(#xorFlood)" /><use xlink:href="#Red50" filter="url(#xorFlood)" /><text x="15" y="275">xor</text></g><g transform="translate(900,25)"><use xlink:href="#Red100" filter="url(#arithmeticFlood)" /><use xlink:href="#Red50" filter="url(#arithmeticFlood)" /><text x="-25" y="275">arithmetic</text></g></g><g transform="translate(0,325)" enable-background="new"><desc>Render the examples using the filters that do not obliteratethe background, thus sometimes causing the background to continueto appear in some cases, and in other cases the backgroundimage blends into itself ("double-counting").</desc><text x="15" y="75">opacity 1.0</text><text x="15" y="115" font-size="27">(without feFlood)</text><text x="15" y="200">opacity 0.5</text><text x="15" y="240" font-size="27">(without feFlood)</text><use xlink:href="#BlueTriangles"/><g transform="translate(275,25)"><use xlink:href="#Red100" filter="url(#overNoFlood)" /><use xlink:href="#Red50" filter="url(#overNoFlood)" /><text x="5" y="275">over</text></g><g transform="translate(400,25)"><use xlink:href="#Red100" filter="url(#inNoFlood)" /><use xlink:href="#Red50" filter="url(#inNoFlood)" /><text x="35" y="275">in</text></g><g transform="translate(525,25)"><use xlink:href="#Red100" filter="url(#outNoFlood)" /><use xlink:href="#Red50" filter="url(#outNoFlood)" /><text x="15" y="275">out</text></g><g transform="translate(650,25)"><use xlink:href="#Red100" filter="url(#atopNoFlood)" /><use xlink:href="#Red50" filter="url(#atopNoFlood)" /><text x="10" y="275">atop</text></g><g transform="translate(775,25)"><use xlink:href="#Red100" filter="url(#xorNoFlood)" /><use xlink:href="#Red50" filter="url(#xorNoFlood)" /><text x="15" y="275">xor</text></g><g transform="translate(900,25)"><use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /><use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /><text x="-25" y="275">arithmetic</text></g></g></g>
</svg>
相关文章:

svg基础(六)滤镜-图像,光照效果(漫反射,镜面反射),组合
1 feImage:图像滤镜 feImage 滤镜从外部来源取得图像数据,并提供像素数据作为输出(意味着如果外部来源是一个 SVG 图像,这个图像将被栅格化。) 1.1 用法: <feImage x"" y"" width"&quo…...

电脑数据误删如何恢复?9 个Windows 数据恢复方案
无论您是由于软件或硬件故障、网络犯罪还是意外删除而丢失数据,数据丢失都会带来压力和令人不快。 如今的企业通常将其重要数据存储在云或硬盘上。但在执行其中任何一项操作之前,您很有可能会丢失数据。 数据丢失的主要原因是意外删除,任何…...

【doghead】uv_loop_t的创建及线程执行
worker测试程序,类似mediasoup对uv的使用,是one loop per thread 。创建一个UVLoop 就可以创建一个uv_loop_t Transport 创建一个: 试验配置创建一个: UvLoop 封装了libuv的uv_loop_t ,作为共享指针提供 对uv_loop_t 创建并初始化...

云计算运营模式介绍
目录 一、云计算运营模式概述 1.1 概述 二、云计算服务角色 2.1 角色划分 2.1.1 云服务提供商 2.1.2 云服务消费者 2.1.3 云服务代理商 2.1.4 云计算审计员 2.1.5 云服务承运商 三、云计算责任模型 3.1 云计算服务模式与责任关系图 3.2 云计算服务模式与责任关系解析…...

物资捐赠管理系统
文章目录 物资捐赠管理系统一、项目演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目(9.9¥带走) 物资捐赠管理系统 一、项目演示 爱心捐赠系统 二、项目介绍 基于springboot的爱心捐赠管理系统 开发语言:…...

YOLOv8改进 | 检测头篇 | 独创RFAHead检测头超分辨率重构检测头(适用Pose、分割、目标检测)
一、本文介绍 本文给大家带来的改进机制是RFAHead,该检测头为我独家全网首发,本文主要利用将空间注意力机制与卷积操作相结合的卷积RFAConv来优化检测头,其核心在于优化卷积核的工作方式,特别是在处理感受野内的空间特征时。RFAConv主要的优点就是增加模型的特征提取能力,…...

私有化部署一个吃豆人小游戏
目录 效果 安装步骤 1.安装并启动httpd 2.下载代码 3.启动httpd 使用 效果 安装步骤 1.安装并启动httpd yum -y install httpd 2.下载代码 进入目录 cd /var/www/html/ 下载 git clone https://gitee.com/WangZhe168_admin/pacman-canvas.git 3.启动httpd syste…...

社区店经营管理新思路:提升业绩的秘诀
作为一名资深的鲜奶吧创业者,我深知在社区经营一家店铺所面临的挑战与机遇。经过5年的探索与实践,我总结出了一套提升社区店业绩的秘诀,今天就和大家分享一下。 一、明确目标客户群体,精准定位 在社区开店,首先要明确…...

统一数据格式返回,统一异常处理
目录 1.统一数据格式返回 2.统一异常处理 3.接口返回String类型问题 1.统一数据格式返回 添加ControllerAdvice注解实现ResponseBodyAdvice接口重写supports方法,beforeBodyWrite方法 /*** 统一数据格式返回的保底类 对于一些非对象的数据的再统一 即非对象的封…...
arm 平台安装snort3
本文来自原创,转载请说明来源。谢谢配合。 选择初衷 最近在学习渗透相关课程,回想起曾经拥有自己的域名和服务器的经历。不幸的是,服务器被注入了木马文件,起初并没有察觉。直到我加入了定时任务,才发现了这个问题。当时我下定决心要打造一个安全的网站,以保护自己的网…...

【Ubuntu 20.04/22.04 LTS】最新 esp-matter SDK 软件编译环境搭建步骤
仓库链接:esp-matter SDK官方软件说明:ESP Matter Programming Guide官方参考文档:使用 Matter-SDK 快速搭建 Matter 环境 (Linux) 环境要求 Ubuntu 20.04 或 Ubuntu22.04网络环境支持访问 Gihub 在安装 esp-matter SDK 软件编译环境之前&a…...
【C语言】案例:输出n位水仙花数
1.题目 输入一个整数n,输出所有n位的水仙花数 2.代码 #include <stdio.h> #include <math.h>// 计算数字的位数 int countDigits(int num) {int count 0;while (num ! 0) {num / 10;count;}return count; }// 计算水仙花数 void findNarcissisticNu…...

代码随想录算法训练营第四十六天(动态规划篇)|01背包(滚动数组方法)
01背包(滚动数组方法) 学习资料:代码随想录 (programmercarl.com) 题目链接(和上次一样):题目页面 (kamacoder.com) 思路 使用一维滚动数组代替二维数组。二维数组的解法记录在:代码随想录算…...
【QT+QGIS跨平台编译】之三十:【NetCDF+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
文章目录 一、NetCDF介绍二、文件下载三、文件分析四、pro文件4.1 netcdf34.2 netcdf44.3 netcdf五、编译实践一、NetCDF介绍 NetCDF(Network Common Data Form)是一种用于存储和处理科学数据的文件格式和库。它提供了一种自描述、可移植和可扩展的方式来组织多维数据,并支…...

从0开始图形学(光栅化)
前言 说起图形学,很多人就会提到OpenGL,但其实两者并不是同一个东西。引入了OpenGL加重了学习的难度和成本,使得一些原理并不直观。可能你知道向量,矩阵,纹理,重心坐标等概念,但就是不知道这些概…...
B站弹幕分析系统
视频展示,请点击。 尚硅谷案例 utllib的基本使用 # 使用urllib来获取百度首页的源码 import urllib.request# (1)定义一个url 就是你要访问的地址 url http://www.baidu.com# (2)模拟浏览器先服务器发送请求 response响应 response urllib.request.urlopen(url)…...

戴上HUAWEI WATCH GT 4,解锁龙年新玩法
春节将至,华为WATCH GT 4作为一款颜值和实力并存的手表,能为节日增添了不少趣味和便利。无论你是钟情于龙年表盘或定制属于自己的表盘,还是过年用来抢红包或远程操控手机拍全家福等等,它都能成为你的“玩伴”。接下来,…...

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之StepperItem组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之StepperItem组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、StepperItem组件 用作Stepper组件的页面子组件。 子组件 无。 接口 St…...

2024-02-08 Unity 编辑器开发之编辑器拓展1 —— 自定义菜单栏与窗口
文章目录 1 特殊文件夹 Editor2 在 Unity 菜单栏中添加自定义页签3 在 Hierarchy 窗口中添加自定义页签4 在 Project 窗口中添加自定义页签5 在菜单栏的 Component 菜单添加脚本6 在 Inspector 为脚本右键添加菜单7 加入快捷键8 小结 1 特殊文件夹 Editor Editor 文件夹是 …...

Intellij IDEA各种调试+开发中常见bug
Intellij IDEA中使用好Debug,主要包括如下内容: 一、Debug开篇 ①、以Debug模式启动服务,左边的一个按钮则是以Run模式启动。在开发中,我一般会直接启动Debug模式,方便随时调试代码。 ②、断点:在左边行…...

利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...

19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...

前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...