带渐变的 SVG 路径

2023-12-04

目前,我有一个脚本(通过 GIMP 中的 .py 插件)可以生成一个带有渐变的 SVG 路径(通过具有不同宽度和颜色的同一路径的多个路径来模拟)。

enter image description here

但是,我想知道是否有一种语法可以生成类似的内容,而无需定义多个路径。

就像定义一个渐变和单一路径一样。

我搜索了诸如 svg 路径渐变之类的关键字,到目前为止我发现的都是沿路径变化的渐变,与上面显示的内容没有任何相似之处,所以我只是想知道我是否没有使用正确的关键字或什么?或者如果存在这样的事情。


这并非完全不可能,但你仅限于非常基本的情况,并且必须跳过一些非常复杂的环节。

SVG 只知道两种类型的渐变:线性渐变和径向渐变。您可以将线性渐变与直线对齐,将径向渐变与同轴的圆或圆弧对齐。

因此,您需要将每条路径切割成单独的线段,如果需要连接直线,请将线转换为多边形以提供角点。

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" >
  <defs>
    <linearGradient id="rainbow">
       <stop stop-color="rgb(255,0,0)"   offset="0.8" />
       <stop stop-color="rgb(255,128,0)" offset="0.825" />
       <stop stop-color="rgb(255,255,0)" offset="0.85" />
       <stop stop-color="rgb(128,255,0)" offset="0.875" />
       <stop stop-color="rgb(0,255,0)"   offset="0.9" />
       <stop stop-color="rgb(0,240,68)"  offset="0.925" />
       <stop stop-color="rgb(0,160,168)" offset="0.95" />
       <stop stop-color="rgb(0,0,255)"   offset="0.975" />
       <stop stop-color="rgb(255,0,255)" offset="1" />
    </linearGradient>
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="60" cy="100" r="50" fx="60" fy="100" id="rg1" />
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="140" cy="100" r="50" fx="140" fy="100" id="rg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="50" id="lg1" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="150" id="lg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="50" y1="100" x2="100" y2="100" id="lg3" />
  </defs>
  <path fill="none" stroke="url(#rg1)" stroke-width="10" d="M 60 55 A 45 45 0 0 0 60 145" />
  <path fill="none" stroke="url(#rg2)" stroke-width="10" d="M 140 55 A 45 45 0 0 1 140 145" />
  <path fill="none" stroke="url(#lg1)" stroke-width="10" d="M 60 55 140 55" />
  <path fill="none" stroke="url(#lg2)" stroke-width="10" d="M 60 145 100 145" />
  <polygon fill="url(#lg3)" points="90 80 100 80 100 150 90 140" />
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带渐变的 SVG 路径 的相关文章

  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display
  • 在 GTK3 中从 Python 中的 SVG 源绘制 SVG 图像

    我可以在 PyQt 中轻松做到这一点 如下所示 img
  • 底部导航视图 - 渐变图标色调

    I have changed icon tint in BottomNavigationView using selector and gradient color as tint when icon is pressed but inst
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • ie11 中的 SVG 问题

    我有一个 div 其高度设置为 320 像素 然后它的子元素宽度设置为 100 它的子文件是一个 SVG 文件 我将其宽度设置为容器的 200 在运行良好的 Chrome 和 Firefox 中 我得到了如下所示的漂亮图像 HTML 看起来
  • 从索贝尔确定图像梯度方向?

    我正在尝试使用 openCV 的 Sobel 方法的结果来确定图像梯度方向 我知道这应该是一个非常简单的任务 我从此处复制了许多资源和答案中的方法 但无论我做什么 所得方向始终在 0 57 度之间 我希望范围为 0 360 我相信所有的深度
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • 无法在 Raphael 中缩放多条路径?

    我尝试使用当前的热门问题 使用 raphael 缩放多条路径 https stackoverflow com questions 3352698 scaling multiple paths with raphael 没有太多运气 我正在通
  • 移动浏览器上带有阴影模糊的 SVG

    我正在努力在尽可能多的平台上制作带有阴影的 SVG 图标 我为此使用以下简单的 CSS test width 14px height 14px background image url images test svg background
  • 动画 SVG 在页面加载之前不会显示动画

    我的网站包含大量广告 加载需要一段时间 确切地说 这并不是一个问题 但我注意到任何 SVG 动画都会立即绘制第一帧 但动画只有在页面上的所有加载完成后才会出现 SVG 动画通常指示旋转器 加载图标 有没有办法立即启动SVG动画 或者如果我将
  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C
  • 触摸滚动 Jquery 插件 - 如何为多个实例使用不同选项进行初始化?

    正如这里所发现的 https github com neave touch scroll https github com neave touch scroll function Define default scroll settings
  • 渲染时 Flutter SVG 延迟

    我在行中显示 SVG 文件形式的图像和文本 由于某些原因 svg 图像的渲染速度比屏幕的其余部分慢 从而导致延迟 这不利于用户体验 这种延迟正常吗 我该怎么做才能使整个屏幕同时渲染 Row mainAxisAlignment MainAxi
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • SVG 查找路径的旋转角度

    我的 SVG 地图有问题 我使用 jVectorMap 创建自定义地图 我需要在字段中心写入每个字段的名称 例子是 JSFiddle 示例 http jsfiddle net mmogn90q 1 放大右侧查看文字 我可以用这个函数找到每个
  • 如何编写可以与操作系统交互的VLC插件

    我需要找出是否有可能以及如何 我不关心C C Lua Python 制作一个VLC插件 其目的是由VLC播放器在特定时间调用视频流的将执行一些操作 我需要做的操作是打开 UDP 套接字并发送从当前播放的视频附带的文件中读取的一些数据 我需要
  • 旋转嵌套 SVG

    我在用SVG js http svgjs com并尝试使用 SVG 进行一些操作 我以前使用过 canvas 但我对其生成的图像质量非常失望 因此我决定使用纯 SVG 我设法将所有内容都改为纯 SVG 方法 除了一件事 旋转 我无法让它发挥
  • 如果没有当前类的引用,svgLoader 无法工作

    这是我的主类 通过这个类 我通过 url 从 api 获取数据 并创建一个适配器类来维护它 但发生了意外错误 这是MainActivity java public class MainActivity extends AppCompatAc

随机推荐

  • Unity - 在特定时间后更改场景

    我正在为 oculus Gear VR 开发游戏 考虑内存管理 我需要在特定时间 以秒为单位 后加载另一个屏幕 void Start StartCoroutine loadSceneAfterDelay 30 IEnumerator loa
  • 元素中的文本换行

    我正在尝试使用在图像上添加文本
  • 创建自定义 UI 视图类以用作地图注释

    我使用故事板创建了一个自定义 UIView 我不希望它位于故事板中的坐标 但我希望能够在整个应用程序中的地图上不同位置重用它像这样 我还希望能够根据用户的请求更新其中的文本 并且只要单击绿色按钮 其中的数字就会增加 我也想自定义下面的图像
  • 在 C 中使用具有相同标志的 fopen 打开文件

    我无法理解这段代码的输出 int main FILE f f1 f fopen mytext w if f1 fopen mytext w 0 printf unable n fprintf f hello n fprintf f1 hi
  • Android TimePicker 在横向模式下显示不佳

    我目前正在构建一个针对 API 23 的应用程序 最低 API 16 我遇到一个问题 TimePicker 显示在 AlertDialog 中 在 Nexus 5 API 在 Nexus 5 API 23 纵向 上 纵向模式下的时间选择器
  • 何时清除 Android 中的缓存目录?

    我有一个显示来自互联网的图片的应用程序 展示设计师的作品 我开始在内部缓存目录中缓存我的内容 但应用程序内容可能需要大约 150 MB 的缓存大小 Android 文档说的是 您应该始终自己维护缓存文件并保持在 合理限制消耗的空间 例如 1
  • jboss Resteasy 使用 @Context 进行参数注入

    我正在使用 jboss 7 1 和 Resteasy 进行基于令牌的身份验证 我使用 PreProcessInterceptor 来拦截请求 获取令牌 从令牌检索用户 然后根据方法上的自定义注释检查用户角色 我现在想做的是将 User 注入
  • 使用 html5 canvas 将图像裁剪为非矩形形状并进行转换

    我是 html5 canvas 的新手 但我正在创建一个基于 html5 canvas 的图像裁剪器 其中包括下一个功能 它应该将图像裁剪为多边形 但不一定是矩形 裁剪图像后 应将图像转换为矩形 我尝试搜索任何满足这些功能的图像裁剪器 但没
  • jquery 中可调整大小、可拖动的对象。可能的?

    我想要一个既可以调整大小又可以拖动的对象 我需要 X Y Size 的对象 这可能吗 有一个例子http www jsfiddle net davidThomas DGbT3 1 它获取可拖动对象的 x 和 y 我怎样才能让它调整大小 Th
  • 如何保留历史 RDD 以供在给定代码中进一步使用

    var history RDD String List String sc emptyRDD val dstream1 val dstream2 val historyDStream dstream1 transform rdd gt rd
  • Android:具有不同 alpha 值的嵌套线性布局

    我有一个矩形 LinearLayout 它有一些边距 一些圆角和 0 3 的 alpha 值 在这个布局中 我有 4 种不同的布局 因为我在不同的位置显示不同的图像 我的问题是 虽然主布局是 0 3 但我希望我的孩子完全可见 或者不受其父
  • Python - 通过 Firefox 的 Tor 浏览器,无法单击按钮

    我一直在尝试通过 Tor 浏览器作为 Firefox 的代理来访问某个站点 dumpert nl 我使用 Tor 浏览器的原因是这样我每次进入网站时都可以使用不同的 IP 地址进入该网站 我知道这是可能的 但我还没有找到方法来做到这一点 我
  • 通过 RequestCultureProviders 处理路由 (URL) 中的文化

    我想创建一个适当的 requestCultureProviders 来使用以下路由模板处理 AspNetCore WebApp 中的路由文化 http url domain culture controller action 例子 http
  • 带对话框的自定义标记

    我如何实现如上所示的对话框 到目前为止 这就是我现在能做的 map addLayer id markers type symbol source markers interactive true layout text field pric
  • 刷新 chrome 页面时用户变为 null flutter web firebase

    我可以在网络中使用 Firebase Auth 正确登录和注册 当我热重新加载页面时 用户信息将保持不变并且他们保持登录状态 但是 如果我使用 Chrome 刷新页面 用户将变为空 我需要再次登录 认证服务 static Future
  • 在ios中运行一个简单的python脚本

    我想在 ios 上运行 python 脚本 我不想用 Python 编写整个应用程序 而只编写其中的一小部分 我试图理解 PyObjC 但它并不那么容易 请给我举个例子好吗 我想将以下方法的结果保存在NSString多变的 def doSo
  • Android 12 新蓝牙权限

    蓝牙是我们应用程序的主要依赖项 因此 我们已经尝试实现新的 Android 12 蓝牙权限 我们唯一的资源是Android 开发人员 Android 12 中的新蓝牙权限 就是说添加权限 android permission BLUETOO
  • 为什么我会收到 Android : 目标服务器未能响应?

    API链接 http www familybuds com storegrunt new api home validate step one platform 1 发布参数 store name abc 代码位于 GoDaddy 服务器上
  • 在 Rails 中使用 collection_check_boxes 填充表单时传递额外的属性到连接表?

    填充表单时是否可以添加额外的属性来连接表collection check boxes在 Rails 中还是我必须以不同的方式填充表单 目前我有 Product Package 和 PackageItem 模型 包包含许多产品 但也可以在包中
  • 带渐变的 SVG 路径

    目前 我有一个脚本 通过 GIMP 中的 py 插件 可以生成一个带有渐变的 SVG 路径 通过具有不同宽度和颜色的同一路径的多个路径来模拟 但是 我想知道是否有一种语法可以生成类似的内容 而无需定义多个路径 就像定义一个渐变和单一路径一样